大佬教程收集整理的这篇文章主要介绍了带有HTML5画布中间孔的多边形,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
现在我有一些非常简单的东西,使用beginPath()然后为每个点执行lineTo().然后填充fill().
我看不到有任何方法可以填充多边形和未填充的中间,就像甜甜圈一样.
我不是做甜甜圈,但它适合这个例子.
有什么我想念的吗?
我宁愿不画它完全填充然后必须重绘中间.
var ctx = canvas.getContext("2d"); ctx.beginPath(); //polygon1--- usually the outside polygon,must be clockwise ctx.moveTo(0,0); ctx.lineTo(200,200); ctx.lineTo(0,0); ctx.closePath(); //polygon2 --- usually hole,must be counter-clockwise ctx.moveTo(10,10); ctx.lineTo(10,100); ctx.lineTo(100,10); ctx.closePath(); // add as many holes as you want ctx.fillStyle = "#FF0000"; ctx.strokeStyle = "rgba(0.5,0.5,0.5)"; ctx.lineWidth = 1; ctx.fill(); ctx.stroke();
这里的主要思想是你只能使用一次;外部多边形必须是顺时针方向,孔必须是逆时针方向.
以上是大佬教程为你收集整理的带有HTML5画布中间孔的多边形全部内容,希望文章能够帮你解决带有HTML5画布中间孔的多边形所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。