サンプル：
http://html5next.appspot.com/canvas2.html
ソース：
<script type="text/javascript">
function createCanopyPath(context) {
// Draw the tree canopy
context.beginPath();
context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);
// Top of the tree
context.lineTo(0, -140);
context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
// Close the path back to its start point
context.closePath();
}
function formload()
{
var canvas = document.getElementById('trails');
var context = canvas.getContext('2d');
context.save();
context.translate(30, 150);
// Create the shape for our canopy path
createCanopyPath(context);
// Stroke the current path
// Increase the line width
context.lineWidth = 4;
// Round the corners at path joints
context.lineJoin = 'round';
// Change the color to brown
context.strokeStyle = '#009900';
context.stroke();
context.restore();
}
</script>
</head>
<body onload="formload();">
<canvas id="trails"
style="border:2px solid black;background-color:whitesmoke;" width="250"
height="120"></canvas>
</body>
塗りつぶし処理：
// Set the fill color to green and fill the canopy
objContext.fillStyle = '#339900';
objContext.fill();
// Stroke the line onto the canvas
objContext.strokeStyle = "red";
objContext.stroke();
objContext.fillStyle = '#000099';
objContext.fillRect(10,10,80,100);
0 件のコメント:
コメントを投稿