说明:
lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。
moveTo(x, y) 将笔移动到指定的坐标x以及y上。
stroke() 描边
lineWidth 设置线的宽度
strokeStyle 设置线条的颜色
实例1
window.onload=function(){
var canvas = document.getElementById('canvas');
canvas.width='300';
canvas.height='300';
var ctx = canvas.getContext('2d');
//先将笔尖移动到0,0处
ctx.moveTo(0,0);
//先将笔滑到200,200处
ctx.lineTo(200,200);
//执行绘画的动作,如果没有执行stroke函数不会有任何的效果
ctx.stroke();
}
画了一条从0,0到200,200位置的直线
实例2
window.onload=function(){
var canvas = document.getElementById('canvas');
canvas.width='300';
canvas.height='300';
var ctx = canvas.getContext('2d');
ctx.lineWidth=10;//设置线条宽度10
ctx.strokeStyle='green';//设置线条颜色为绿色
//先将笔尖移动到0,0处
ctx.moveTo(0,0);
//先将笔滑到200,200处
ctx.lineTo(200,200);
//执行绘画的动作,如果没有执行stroke函数不会有任何的效果
ctx.stroke();
}
加上了线的宽度和颜色