怎么用HTML5Canvas绘制三角形和矩形等多边形

本篇内容介绍了“怎么用HTML5 Canvas绘制三角形和矩形等多边形”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联-专业网站定制、快速模板网站建设、高性价比鲁甸网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式鲁甸网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖鲁甸地区。费用合理售后完善，十年实体公司更值得信赖。

使用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.   

2.   

3.   

4.   

5.   

6.   

7.   

8.   

9.   

10.   

11. 您的浏览器不支持canvas标签。   

12.   

13.   

14.   

15.   

16. //获取Canvas对象(画布)  

17. var canvas = document.getElementById("myCanvas");   

18. //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误  

19. if(canvas.getContext){     

20.     //获取对应的CanvasRenderingContext2D对象(画笔)  

21.     var ctx = canvas.getContext("2d");     

22.        

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.   

39.   

40.      

对应的显示效果如下：

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

XML/HTML Code复制内容到剪贴板

1.   

2.   

3.   

4.   

5.   

6.   

7.   

8.   

9.   

10.   

11. 您的浏览器不支持canvas标签。   

12.   

13.   

14.   

15. //获取Canvas对象(画布)   

16. var canvas = document.getElementById("myCanvas");   

17. //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   

18. if(canvas.getContext){     

19.     //获取对应的CanvasRenderingContext2D对象(画笔)   

20.     var ctx = canvas.getContext("2d");     

21.        

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.   

34.   

35.   

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

“怎么用HTML5 Canvas绘制三角形和矩形等多边形”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

当前文章：怎么用HTML5Canvas绘制三角形和矩形等多边形
网站地址：http://scjbc.cn/article/jchpsc.html