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

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

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

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

绘制三角形

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