Canvas中的基本概念
var cvs = document.getElementById('cvs'); //画布
var ctx = cvs.getContext('2d'); // 画笔
HTML 5中的Canvas真牛用JavaScript轻轻松松就能画出各种各样的图案！简单来说，Canvas就是个白板，想画啥就得先学怎么画线
ctx.moveTo(x,y)
在Canvas画布上，首先用moveTo把线条移到你想要的地方，像拿起画笔写字那样简单；接着用lineTo画出一条直线路径，跟真的用笔画出来一模一样。别忘记加上stroke让线条亮起来，达到最好的效果！这些就是咱们画直线的基本操作。
绘制简单图形
ctx.moveTo(100,100); ctx.lineTo(200,100);
这简单，不只画直线，连着线，就能画出好多形状！比如说，四根线就成了一个长方形。先画好几道线，再把所有的边上色，形状就都看清楚了哟。
记住用Canvas画画时不要等到全部路径画完再上色描边。这招超有用的，减轻电脑压力，画得更快喔！
ctx.moveTo(100,100); ctx.lineTo(200,100);
线条样式设置
在画布这儿，你得随心情随便调节线条的样子。比如说，换个粗细或颜色呗！而且，画矩形可要注意量一下边界线。因为 canvas 的线条还是挺规矩的，所以一不小心的话，线条会被拉长，总宽度咱得算清楚呐。
ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineTo(200,200); ctx.lineTo(100,200); ctx.lineTo(100,100); ctx.stroke();
画图时要记得检查路径是不是封闭起来要是有漏洞的话，那这不就是白搭吗？就算试着调整线条粗细或换个颜色，但只要路径没包完整，咋整也没用！
ctx.lineWidth = 10; ctx.strokeStyle = 'rgba(255,0,0,0.5)';
进阶操作：圆角与端点设置
Canvas不仅可以随便画线和矩形~如果喜欢，还能把矩形变成圆角的，改变线条尾部的形状也是轻松搞定！咋整？好办，简单调调设置就行了！
在Canvas画布里边儿，用lineCap就能搞定那些烦人的线结尾问题，就分为平头和方头两类，选哪种看你要啥样的效果呗！
总结与展望
咱可得赶紧弄清HTML5 Canvas怎么画图和选颜色咯。Canvas这东西就是个任你画的画板，掌握好了，不仅能把图案变得五彩斑斓，还能让网页更有趣！
别看现在用不着Canvas，以后科技发展起来，这玩意儿肯定特别有用。对于做网页前端设计来说太关键了！所以，快去学习怎么使用Canvas，把知识应用到项目上，大胆地去创新！
告诉大家个HTML5Canvas画直线的小窍门，希望对你有帮助！
ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.moveTo(200,100); //注意这里 ctx.lineTo(200,200); ctx.lineTo(100,200); ctx.lineTo(100,100); ctx.lineWidth = 10; ctx.strokeStyle = 'rgba(255,0,0,0.5)'; ctx.stroke();
。
评论0