canvas绘制五角星

canvas可以在浏览器中绘制很多所需要的各种图形，只要我们知道图形的各个坐标点，就能够绘制出很多图。但是要想画出精确漂亮的图案，需要我们精确的计算出每个坐标点。下面的五角星的坐标点设计的不是很好，画出的图形也就不是很标准。但只要掌握了步骤，计算出好的坐标点，一定画出比下面的这个图好看，那就先看看步骤和代码是如何实现的吧。

(1)最终五角星图形:

(2)绘制图形的代码及过程:

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();