带有HTML5画布中间孔的多边形

前端之家收集整理的这篇文章主要介绍了带有HTML5画布中间孔的多边形前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用< canvas>标签我需要能够在多边形中绘制一个洞.

现在我有一些非常简单的东西,使用beginPath()然后为每个点执行lineTo().然后填充fill().

我看不到有任何方法可以填充多边形和未填充的中间,就像甜甜圈一样.
我不是做甜甜圈,但它适合这个例子.

有什么我想念的吗?
我宁愿不画它完全填充然后必须重绘中间.

解决方法

这就是我的工作:
  1. var ctx = canvas.getContext("2d");
  2. ctx.beginPath();
  3.  
  4. //polygon1--- usually the outside polygon,must be clockwise
  5. ctx.moveTo(0,0);
  6. ctx.lineTo(200,200);
  7. ctx.lineTo(0,0);
  8. ctx.closePath();
  9.  
  10. //polygon2 --- usually hole,must be counter-clockwise
  11. ctx.moveTo(10,10);
  12. ctx.lineTo(10,100);
  13. ctx.lineTo(100,10);
  14. ctx.closePath();
  15.  
  16. // add as many holes as you want
  17. ctx.fillStyle = "#FF0000";
  18. ctx.strokeStyle = "rgba(0.5,0.5,0.5)";
  19. ctx.lineWidth = 1;
  20. ctx.fill();
  21. ctx.stroke();

这里的主要思想是你只能使用一次;外部多边形必须是顺时针方向,孔必须是逆时针方向.

猜你在找的HTML5相关文章