它只是一个绘图容器，除了id、类、样式等属性外，还有高度和宽度属性。主要有三个步骤来绘制：
1。获取与元素对应的DOM对象，这是一个画布对象；
2。getContext（）的画布上的对象的方法调用，并得到canvasrenderingcontext2d对象。
三.调用canvasrenderingcontext2d对象绘制。
通过分析五角星，可以确定每个顶点坐标法。这里有一点我们应该注意：在画布上，y轴的方向是向下的。
相应的代码如下所示：
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR的画布document.getelementbyid（画布）；
VaR上下文= canvas.getcontext（2D）；
Context.beginPath（）；
顶点的坐标是根据创建顶点的路径设置的。
对于（var i = 0；i < 5；i + +）{
Context.lineTo（（数学。COS）（（18 +我* 72）/ 180 *数学。PI）* 200 + 200，
-math.sin（（（18 +我* 72）/ 180 *数学。PI）* 200 + 200）；
Context.lineTo（（数学。COS）（（54 +我* 72）/ 180 *数学。PI）* 80 + 200，
-math.sin（（（54 +我* 72）/ 180 *数学。PI）* 80 + 200）；
}
Context.closePath（）；
设置边框样式和颜色
上下文。线宽= 3；
context.fillstyle =# f6f152 ；
context.strokestyle =# f5270b ；
Context.fill（）；
context.stroke（）；
最终效果：
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。
