HTML5 Canvas绘制五角星-一点网

我们可以运用canvas在浏览器中绘制出各种漂亮的图形，仅需要确定图形的各个坐标点即完成我们所需要的任务。如果我们要想画出精确的图案，就需要精确的计算出每个坐标点。下面给出了画五角星的基本方法（仅供参考），只要掌握了步骤，准确计算出坐标点，就可以绘制出比下面的这个图好看，那就先看看步骤和代码是怎样实现的吧。

一、Canvas绘制五角星的步骤

var canvas = document.getElementById("demo");
canvas.width = 500;
canvas.height = 500;
canvas.style.border = "2px solid pink";
var ctx = canvas.getContext("2d");
// 找到起始点
ctx.moveTo(0, 150);
// 到达结束点
ctx.lineTo(500, 150);
ctx.lineTo(0,500);
ctx.lineTo(250,0);
ctx.lineTo(500,500);
// ctx.lineTo(0, 100);
// 闭合线段
ctx.closePath();
// 设置线段描边的颜色
ctx.strokeStyle = "red";
// 设置描边的宽度
ctx.lineWidth = 3;
// 将线段描边
ctx.stroke();
// 设置填充的属性值
ctx.fillStyle = "yellow";
// 设置填充的颜色
ctx.fill();