场景
纯原生canvas绘制，可以自定义位置、颜色等信息。
实现
以下封装成方法，调用后传参即可。图形两角间边距暂时写死，可以自行加减参数来调整。
1.实心圆
function circular(x, y, radius, fillColor, strokeColor){
ctx.beginPath();//开始绘制
ctx.arc(x, y, radius, 0, 2 * Math.PI); //arc 的意思是"弧"
ctx.fillStyle = fillColor; //设置填充颜色
ctx.fill(); //开始填充
ctx.strokeStyle = strokeColor; //将线条颜色设置为蓝色
ctx.setLineDash([]);
ctx.stroke(); //stroke() 方法默认颜色是黑色（如果没有上面一行，则会是黑色）。
}
2.三角形
function triangle(x, y, fillColor){
ctx.beginPath();
ctx.moveTo(x, y); //上顶点
ctx.lineTo(x - 23, y + 22); //左顶点
ctx.lineTo(x + 8, y + 15); //右顶点
ctx.stroke();
ctx.fillStyle = fillColor;
ctx.fill();
}
3.五边形
function pentagon(x, y, fillColor){
ctx.beginPath();
ctx.moveTo(x, y); //顶点
ctx.lineTo(x - 15, y + 10); //最左
ctx.lineTo(x - 8, y + 25); //左下
ctx.lineTo(x + 8, y + 25); //右下
ctx.lineTo(x + 15, y + 10); //最右
ctx.closePath();
ctx.fillStyle = fillColor;
ctx.fill();
}
4.五角星
function pointedStar(x, y, angle){
ctx.beginPath();
ctx.rotate(angle*Math.PI/180); //旋转角度 输入number
ctx.moveTo(x, y);
ctx.lineTo(x + 10, y + 30);
ctx.lineTo(x - 15, y + 11);
ctx.lineTo(x + 15, y + 11);
ctx.lineTo(x - 10, y + 30);
ctx.closePath();
ctx.fillStyle = 'black';
ctx.strokeStyle = "rgb(250, 252, 211)";
ctx.stroke();
ctx.fill();
ctx.restore();
}