Canvas绘画大法解密：掌握CanvasRenderingContext2D的神秘技能

CanvasRenderingContext2D 控件都有啥功能？

首先，Canvas元素给了咱们一个功能超强的绘画工具箱，它的好用就体现在CanvasRenderingContext2D对象上。这个大牛在绘图方面有这几个主要的特性，像什么strokeStyle（弄清楚画笔的颜色或渐变效果），还有globalAlpha（可以改变绘制出来的东西的不透明程度），以及lineWidth（直接影响到你画出来的线有多粗）等，这样一来，我们就能随心所欲地控制画布上的所有颜色啦、透明度啊、线条粗细之类的。不同属性与方法的搭配组合，使得Canvas绘图变得花样百出。

绘制路径的基本步骤

用CanvasRenderingContext2D画画，得先碰一下beginPath（）开始新路径。再用moveTo(x,y)告诉电脑咱们从哪儿出发。然后就是lineTo(x,y)告诉电脑接下来走哪条线咯。最后别忘了stroke（），它能帮我们画出线段来。想要把路径收起来就用closePath()就对了。这几个关键步骤差不多就是Canvas上画路径的大概过程。

绘制三角形

三角形可是最简单的多边形，用Canvas画起来也挺容易！只要定下起点和两点的位置，CanvasRenderingContext2D就能帮我们轻松画出一个美美的三角形！首先找好三个点的坐标，然后用moveTo()和lineTo()把这三点连起来，最后别忘了用closePath()来封闭路径哟~当然，你还可以改变线条的颜色和粗细，让三角形看起来更酷炫！

绘制矩形

大家都知道矩形，这可是图形里的老面孔了。在Canvas里，为了画矩形，他们还特意弄出了两个专属工具——rect()和fillRect()或者strokeRect()。利用它们，你就可以轻松搞定矩形的左上方坐标定位还有宽度高度设定，真的很省事儿！有了这些工具，画矩形再也不用费心思，让你对Canvas更上手！

其他多边形的画法

Canvas可不止图个三角形和矩形！它还能画正方形、圆形、五边形等等。只要学过怎么画好路线，照样能用调整位置和封口的方式画出其他形状。利用这个对象的各种属性和方法，自由搭配，你完全可以做出各种各样好看又好玩的图案。

应用场景举例

   
   
   
   
   
   
   
  
   
   
您的浏览器不支持canvas标签。   
   
  
  
   
//获取Canvas对象(画布)   
var canvas = document.getElementById("myCanvas");   
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
if(canvas.getContext){     
    //获取对应的CanvasRenderingContext2D对象(画笔)   
    var ctx = canvas.getContext("2d");     
       
    //开始一个新的绘制路径   
    ctx.beginPath();   
    //设置线条颜色为蓝色   
    ctx.strokeStyle = "blue";   
    //设置路径起点坐标   
    ctx.moveTo(20, 50);   
    //绘制直线线段到坐标点(60, 50)   
    ctx.lineTo(20, 100);   
    //绘制直线线段到坐标点(60, 90)   
    ctx.lineTo(70, 100);       
    //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。   
    ctx.closePath();   
    //最后，按照绘制路径画出直线   
    ctx.stroke();   
}   
   
   

Canvas画画现在挺牛的，不仅能做游戏，还能看图表。所以你要是想学这个，其实挺有意思的。用了这个CanvasRenderingContext2D对象以后，开发者就能做出各种各样的图像，直接画到网页上。像是游戏里那些炫酷的动感粒子效果，还有那个一拉就变的互动动作等等，都能用这玩意儿弄出来。还有像看那种统计图表、流程图什么的数据，用这也挺好的。当然，如果再跟其他技术像WebGL配合起来，搞个3D效果也是可以做到的。所以说，学这个Canvas多边形画画在前端开发里还是挺有用的！

总结与展望

这次讲了HTML5的Canvas怎么画多边形，我摸清了CanvasRenderingContext2D这家伙的用法，学会用它画各种形状。还聊了聊别的画多边形的手法和实际用处，以后做项目就更有底气了。再过些时日，随着Web技术愈发强大，Canvas会更多出现在前端设计里，给大家呈现更多精彩的视觉享受。

看完这篇文章，你应该能更好地掌握如何用HTML5 Canvas画复杂的多边形了。把这个技能用到项目里去！那么你觉得Canvas在网页设计领域还有哪里可以大展身手？快来分享下你的看法！

  
  
  
  
  
  
  
  
  
  
您的浏览器不支持canvas标签。   
  
  
  
//获取Canvas对象(画布)   
var canvas = document.getElementById("myCanvas");   
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
if(canvas.getContext){     
    //获取对应的CanvasRenderingContext2D对象(画笔)   
    var ctx = canvas.getContext("2d");     
       
    //开始一个新的绘制路径   
    ctx.beginPath();   
    //设置线条颜色为蓝色   
    ctx.strokeStyle = "blue";   
    //以canvas中的坐标点(10,10)作为绘制起始点，绘制一个宽度为80px、高度为50px的矩形   
    ctx.rect(10, 10, 80, 50);   
    //按照指定的路径绘制直线   
    ctx.stroke();   
    //关闭绘制路径   
    ctx.closePath();   
}   
  
  

。