借助HTML5 Canvas来绘制三角形和矩形等多边形的方法

网络
困难是动摇者和懦夫掉队回头的便桥；但也是勇敢者前进的脚踏石。我不识何谓君子，但看每事肯吃亏者便是；我不识何谓小人，但看每事好占便宜者便是。

使用HTML5 Canvas绘制多边形所需的CanvasRenderingContext2D对象的主要属性和方法(有「()」者为方法)如下：

属性或方法 基本描述
strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
globalAlpha 定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。
lineWidth 定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
lineCap 指定线条两端的线帽如何绘制。合法的值是 butt、round和square。默认值是"butt"。
beginPath() 开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。
moveTo(int x, int y) 定义一个新的绘制路径的起点坐标
lineTo(int x, int y) 定义一个绘制路径的中间点坐标
stroke(int x, int y) 沿着绘制路径的坐标点顺序绘制直线
closePath() 如果当前的绘制路径是打开的，则闭合该绘制路径。

绘制三角形

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>HTML5Canvas绘制三角形入门示例</title>
  6. </head>
  7. <body>
  9. <!--添加canvas标签，并加上红色边框以便于在页面上查看-->
  10. <canvasid="myCanvas"width="400px"height="300px"style="border:1pxsolidred;">
  11. 您的浏览器不支持canvas标签。
  12. </canvas>
  15. <scripttype="text/javascript">
  16. //获取Canvas对象(画布)
  17. varcanvas=document.getElementById("myCanvas");
  18. //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
  19. if(canvas.getContext){
  20. //获取对应的CanvasRenderingContext2D对象(画笔)
  21. varctx=canvas.getContext("2d");
  23. //开始一个新的绘制路径
  24. ctx.beginPath();
  25. //设置线条颜色为蓝色
  26. ctx.strokeStyle="blue";
  27. //设置路径起点坐标
  28. ctx.moveTo(20,50);
  29. //绘制直线线段到坐标点(60,50)
  30. ctx.lineTo(20,100);
  31. //绘制直线线段到坐标点(60,90)
  32. ctx.lineTo(70,100);
  33. //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
  34. ctx.closePath();
  35. //最后，按照绘制路径画出直线
  36. ctx.stroke();
  37. }
  38. </script>
  39. </body>
  40. </html>

对应的显示效果如下：

绘制矩形
之所以将Canvas绘制矩形单独提出来，是因为Canvas的画笔工具——CanvasRenderingContext2D对象为绘制矩形提供了专用的方法。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>HTML5Canvas绘制矩形入门示例</title>
  6. </head>
  7. <body>
  9. <!--添加canvas标签，并加上红色边框以便于在页面上查看-->
  10. <canvasid="myCanvas"width="400px"height="300px"style="border:1pxsolidred;">
  11. 您的浏览器不支持canvas标签。
  12. </canvas>
  14. <scripttype="text/javascript">
  15. //获取Canvas对象(画布)
  16. varcanvas=document.getElementById("myCanvas");
  17. //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
  18. if(canvas.getContext){
  19. //获取对应的CanvasRenderingContext2D对象(画笔)
  20. varctx=canvas.getContext("2d");
  22. //开始一个新的绘制路径
  23. ctx.beginPath();
  24. //设置线条颜色为蓝色
  25. ctx.strokeStyle="blue";
  26. //以canvas中的坐标点(10,10)作为绘制起始点，绘制一个宽度为80px、高度为50px的矩形
  27. ctx.rect(10,10,80,50);
  28. //按照指定的路径绘制直线
  29. ctx.stroke();
  30. //关闭绘制路径
  31. ctx.closePath();
  32. }
  33. </script>
  34. </body>
  35. </html>

对应的矩形效果显示如下：

以上就是借助HTML5 Canvas来绘制三角形和矩形等多边形的方法。用无所谓的态度，过好随遇而安的生话。更多关于借助HTML5 Canvas来绘制三角形和矩形等多边形的方法请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
突破canvas语法限制 让他支持链式语法
html5-Canvas可以在web中绘制各种图形
html5之Canvas路径绘图、坐标变换应用实例
html5 canvas 画图好代码教程案例分析
HTML5 Canvas像素处理如何使用接口介绍