canvas初学,教你学会在canvas画布上画线

canvas 在html5要实现非常炫酷的效果 可以使用2d绘图功能，所有引入canvas(画布) 多用于游戏开发，并且低版本ie不支持

    注意:

    1.canvas默认大小为with:300 height:150

    2.如果浏览器不支持canvas，该浏览器会显示canvas标签的内容，但是不会运行canvas所绘制的效果

    3.canvas是行元素 

    4.canvas设置宽高的时候只能通过标签的属性进行设置，不能通过css样式中的height和width进行设置，也不能通过js设置，也就是canvas.style.height/width，通过标签以为的方式设置宽高会把canvas绘制的图像拉伸

    5.可以直接给canvas属性设置大小

HTML部分:

<canvas id="canvas" width="400" height="400">你的浏览器太low了 不支持canvas 赶快换一个吧</canvas>

JS部分:

① 获取canvas

var canvas = document.getElementById('canvas');

② 在canvas画布上里创建一支画笔

var ctx = canvas.getContext("2d");

③ 开始一个新路径(在画布上重新起个头)

ctx.beginPath();

④ 起始位置

ctx.moveTo(0, 0);

⑤ 设置线的宽度

ctx.lineWidth = 2;

⑥ 设置画笔描边儿颜色

ctx.strokeStyle = "red";

⑦ 开始画线,lineTo 划线(横坐标,纵坐标)先画一个正方形

ctx.lineTo(400, 0);
ctx.lineTo(400, 400);
ctx.lineTo(0, 400);
ctx.lineTo(0, 0);

⑧ 执行绘制

ctx.stroke();

效果如下:

 

 

 

⑨ 关闭当前路径(如果不关闭,之后的代码会覆盖之前的代码,比如画笔的颜色,画笔的宽度等);

ctx.closePath();

⑩ 保存当前绘画

ctx.save();

结束end

我们在这个里面再画一个正方形

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineWidth = 2;
ctx.strokeStyle = "green";
ctx.lineTo(100, 300);
ctx.lineTo(300, 300);
ctx.lineTo(300, 100);
ctx.lineTo(100, 100);
ctx.stroke();

如果你画的是一个封闭图形我们可以进行填充

设置填充颜色:

ctx.fillStyle = "yellow";

填充:

ctx.fill();

效果如下:

 

 

最后一步:

清除画布,我们可以清除整个画布也可以清除画布的部分

清除画布的部分:

可清除部分画布clearRect(x, y, 结束为止的x, 结束为止的y);

x:要清除部分左上角X坐标
y:要清除部分左上角Y坐标

ctx.clearRect(0, 0, 400, 200);

效果如下:我这里清除画布的上半部分

 

 

也可清除整个画布clearRect(0, 0, 画布的宽, 画布的高);

ctx.clearRect(0, 0, 400, 400);

这里是清除了整个画布

 

 Happy end!

设置线的宽度