基于HTML5的圆形多角度图形绘制

先看看最简单的效果：

代码如下：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。

VaR的画布document.getelementbyid（我），CTX = canvas.getcontext（二维的）；
setInterval（）{（）函数（
（00400400）ctx.clearrect；
Ctx.save（）；
（200200）ctx.translate；
VaR置信区间为90，PI = math.pi / CI，X1 = 100，Y1 = 0，X2 = 0，Y2。
Ctx.beginPath（）；
对于（var i = CI * 2；i 0；i）{
ctx.rotate（PI）；
Ctx.moveTo（x1，y1）；
Y2 = x1 * Math.sin（PI）；
X2 = x1 * Math.cos（PI）；
X3 =（X1 X2）/ 2 + x2 + 10 + Math.random（）* 20；
Y3 = Y2 / 2；
Ctx.lineTo（X3，Y3）；
Ctx.lineTo（x2，y2）；
}
Ctx.stroke（）；
Ctx.restore（）；
}，100）；

在上述多边形的基础上，进一步：

代码如下：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。

VaR的画布document.getelementbyid（我），CTX = canvas.getcontext（二维的），R = 10；
setInterval（）{（）函数（
（00400400）ctx.clearrect；
Ctx.save（）；
（200200）ctx.translate；
VaR研究= ctx.createradialgradient（0,0,0,0,0，R + 20）；
Grad.addColorStop（0.2，白色）；
Grad.addColorStop（0.7''）；
Grad.addColorStop（0.8，'orange）；
Ctx.beginPath（）；
ctx.fillstyle =毕业；
Ctx.arc（0,0，R，0，数学，PI * 2，真的）；
Ctx.fill（）；
VaR置信区间为90，PI = math.pi / CI，X2 = 0，Y2 = 0，X3 = 0；
X1＝100；
Y1 = 0；
Ctx.beginPath（）；
对于（var i = CI * 2；i 0；i）{
ctx.rotate（PI）；
Ctx.moveTo（R，0）；
Y2 = R * Math.sin（PI）；
X2 = R * Math.cos（PI）；

X3 =（R 2）/ 2 + x2 + 10 + Math.random（）* 20；
Y3 = Y2 / 2；

Ctx.lineTo（X3，Y3）；
Ctx.lineTo（x2，y2）；
}
Ctx.fill（）；
Ctx.restore（）；
r＝100（r＝2）；
}，100）；

以上是本文的全部内容，希望能对大家有所帮助。