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!
设置线的宽度