Canvas？名字好听？其实它就是HTML5的一个画布功能！就是一张看不见摸不着的电脑屏幕画纸。想在线涂鸦？那就用这个喽！Canvas标签就是让这个画板运作起来的外壳，主要还得依靠JavaScript才能实现绘画效果！最后总结一下，想让网页酷炫一点，装上Canvas就对了！
怎么开始画线条？
首先，你得有个HTML文件，把Canvas标签放进去，这样咱们才有个“画板”嘛!这就跟建房子一样，先搭个架子再说。别怕，就算老古董浏览器不支持Canvas，顶多也就只能看到字而已，但是现在这种问题越来越少了，大多数浏览器都能用Canvas轻轻松松搞定！说起正经事儿，咱们赶快绘画！首先，你得拿到Canvas，就像手里握着笔，是不是很重要？Canvas大小可是画师在Canvas标签上自己设定的，或者用JavaScript这牛逼的手法也行。
获取绘图上下文
搞定了Canvas对象，那就得赶紧熟悉控制画图的那块环境咯。就像你刚拿起画笔画画，首先要学会怎么抓住笔、怎么往下画。画图时主要靠context去操作Canvas，这个context就是你画画的小天地，它控制着你可以在Canvas上面画什么和你怎么画。搞定了这个，你的画画旅程就启航！
Canvas绘图与动画基础
#canvas{ border: 1px solid #aaa; text-align: center;
}
当用户浏览器不支持Canvas,请更换浏览器重试！
画一条简单的线
动笔画线，知道怎么做吗？先确定起点跟终点，再调整颜色跟粗细，还能画出空心线！是不是感觉画中有瑕疵，比如直线不直，颜色对不上？别担心，这些都不是事，多摸索熟练就好了！
画一个闭合图形
Canvas不单单可以画直线，还能搞定圆圈、方形这些封闭图形！例如，我们可以画出一个可爱的三角形或是一个规矩的矩形。在开始画之前，记得告诉Canvas一下起点和终点在哪。最后别忘了利用closePath这个指令，它是画封闭图形必不可少的步骤！
颜色和样式
var canvas = document.getElementById("canvas");
Canvas玩图，颜料和款式最重要！选直线颜料的颜色，纸张的色调，或者让色彩慢慢变幻也行。Canvas有好多种颜色选择，有RGB，RGBA，还有十六进制等等。喜欢哪个就用哪个。款式方面，你还能调节线条粗细，实线还是虚线？线条起点和终点怎么设置，都随你意。
实战案例：画一个红色三角形
来教你怎么画红三角！首先得确定画布Canvas的大小，再拿起”CONTEXT”来。开始画三角喽！记得开始前说一句”BEGINPATH”,这样Canvas知道你要描绘新的图样了。接着就是填充颜色，别忘了用”FILL”工具。最后别忘记告诉Canvas你完成了，输入”CLOSEPATH”就行。
canvas.width=1014; canvas.height=768;
注意事项
画Canvas线段得注意这几点哈~首先，Canvas坐标是左上角为起点，x轴朝右走，y轴往下看哒，咱们得按照这个来；其次呐，默认直线是黑色滴，换个颜色别忘记设置喔；最后，Canvas画出来的图可是矢量的，放大也不会糊，好清晰！
浏览器兼容性
var context = canvas.getContext("2d");
虽然现在大多数浏览器都能用Canvas，但是还有些旧版的可能不行喔！所以在开始使用Canvas之前，一定要确认下你的浏览器能不能行。如果发现它不支持Canvas的话，那咱们就换个方法展示，比如加几个字或者贴张图上去。虽然浏览器不给力，但我们总不能让大家失望不是吗？
性能优化
Canvas虽好，但别过头了，否则网页动作就慢下来了。例如画的东西太多，可能导致网页反应迟钝或直接卡住。所以用Canvas时要小心，记得要注意性能问题。例如，减少一些没必要的东西或者试试使用requestAnimationFrame使动画更流畅。
var context = canvas.getContext("2d");//得到绘图的上下文环境
context.beginPath();//开始绘制线条，若不使用beginPath，则不能绘制多条线条
context.moveTo(100, 100);//线条开始位置
context.lineTo(700, 700);//线条经过点
context.lineTo(100, 700);
context.lineTo(100, 100);
context.closePath();//结束绘制线条，不是必须的
context.lineWidth = 5;//设置线条宽度
context.strokeStyle = "red";//设置线条颜色
context.stroke();//用于绘制线条
context.beginPath();
context.moveTo(200, 100);
context.lineTo(700, 600);
context.closePath();
context.strokeStyle = "black";
context.stroke();
总结
Canvas可是个超棒的小助手，让我们可以在网页上涂涂抹抹，随心所欲。不过要精通这个小神器，还需要掌握些窍门哈~希望这篇文章能够帮你更好地熟悉Canvas。别害羞，跟大家说说在用Canvas时有啥好玩儿或者棘手的事情没？赶快到评论区分享一下你的实战经验，顺便点赞转发推荐给更多小伙伴！
评论0