線を描く方法です。
SAMPLE解説
<script language="javascript" type="text/javascript">
onload = function(){
var linePos = [
[100,100],
[150,50],
[200,185],
[300,250],
[350,100],
[400,250],
[450,100],
[500,20],
[550,80],
[600,120]
];
var testCanvas = document.getElementById('testCanvas');
if(testCanvas.getContext){
ctx = testCanvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,0);
for(var i=0;i<linePos.length;i++){
ctx.lineTo(linePos[i][0],linePos[i][1]);
}
ctx.stroke();
}
}
</script>
beginPath()で開始。一番最初の始点は、moveToで指定します。その後、moveToで書く折れ線の点を指定します。最後にstrokeで描かれるようになっています。
PR
