五角星

var can = document.getElementById('can');
var ctx = can.getContext('2d');
 ctx.beginPath();
for (let i = 0; i < 5; i++) {
 ctx.lineTo(Math.cos((18 + i*72)/180 * Math.PI)*150 + 200,
 -Math.sin((18 + i*72)/180*Math.PI) * 150 + 200);
 ctx.lineTo(Math.cos((54 + i*72)/180 * Math.PI)*75 + 200,
 -Math.sin((54 + i*72)/180*Math.PI) * 75 + 200); 
}
 ctx.closePath();

 ctx.lineWidth = 6;
 ctx.fillStyle = '#eed873';
 ctx.strokeStyle = '#417692';

 ctx.fill();
 ctx.stroke();

仔细阅读代码你会发现，我们绘制五角星是从圆形出发，在圆形上找到了不同角度的5个点，作为五角星的锐角。然后我们在这个圆形半径一半的位置，也就是比第一次画的圆形更小的圆形上，再确定不同角度5个点，作为五角星的5个钝角。
每个点的距离刚好是圆形360的五分之一，即72度。然后这两个圆形组成的圆环上面的这5个点在彼此错开36度，就能绘制一个漂亮的五角星。
运行结果如下图：

大五角星

为了复用，我们把它封装成函数

 function star1(r,R, x, y){
  ctx.beginPath();
for (let i = 0; i < 5; i++) {
 ctx.lineTo(Math.cos((18 + i*72)/180 * Math.PI)*R + x,
 -Math.sin((18 + i*72)/180*Math.PI) * R + y);
 ctx.lineTo(Math.cos((54 + i*72)/180 * Math.PI)*r + x,
 -Math.sin((54 + i*72)/180*Math.PI) * r + y); 
}
 ctx.closePath();

 ctx.lineWidth = 6;
 ctx.fillStyle = '#c34b2b';
 ctx.strokeStyle = '#263a72';

 ctx.fill();
 ctx.stroke();
 };
 star1(57,150,280,280,);

效果如图所示：

封装成函数

它变成正五角星。

正五角星

添加旋转角度，

 function star1(r,R, x, y, z){
  ctx.beginPath();
for (let i = 0; i < 5; i++) {
 ctx.lineTo(Math.cos((18 + i*72 - z)/180 * Math.PI)*R + x,
 -Math.sin((18 + i*72 - z)/180*Math.PI) * R + y);
 ctx.lineTo(Math.cos((54 + i*72 - z)/180 * Math.PI)*r + x,
 -Math.sin((54 + i*72 - z)/180*Math.PI) * r + y); 
}
 ctx.closePath();

 ctx.lineWidth = 6;
 ctx.fillStyle = '#c34b2b';
 ctx.strokeStyle = '#263a72';

 ctx.fill();
 ctx.stroke();
 };


 star1(57,150,280,280,20);

效果如图所示：

旋转

改成圆角

function star1(r,R, x, y, z){
  ctx.beginPath();
for (let i = 0; i < 5; i++) {
 ctx.lineTo(Math.cos((18 + i*72 - z)/180 * Math.PI)*R + x,
 -Math.sin((18 + i*72 - z)/180*Math.PI) * R + y);
 ctx.lineTo(Math.cos((54 + i*72 - z)/180 * Math.PI)*r + x,
 -Math.sin((54 + i*72 - z)/180*Math.PI) * r + y); 
}
 ctx.closePath();

 ctx.lineWidth = 16;
 ctx.lineJoin = 'round';
 ctx.fillStyle = '#c34b2b';
 ctx.strokeStyle = '#263a72';

 ctx.fill();
 ctx.stroke();
 };


 star1(57,150,280,280,20);

运行效果

没有尖角的五角星

再加个for循环，画100个随机的小星星


for (let i = 0; i < 100; i++) {
  let r = Math.random() * 10 + 10;
  let x = Math.random() * can.width;
  let y = Math.random() * can.height;
  let z = Math.random() * 360;
  star1(r,r/2.0,x,y,z);
  
}

 function star1(r,R, x, y, z){
  ctx.beginPath();
for (let i = 0; i < 5; i++) {
 ctx.lineTo(Math.cos((18 + i*72 - z)/180 * Math.PI)*R + x,
 -Math.sin((18 + i*72 - z)/180*Math.PI) * R + y);
 ctx.lineTo(Math.cos((54 + i*72 - z)/180 * Math.PI)*r + x,
 -Math.sin((54 + i*72 - z)/180*Math.PI) * r + y); 
}
 ctx.closePath();

 ctx.lineWidth = 2;
 ctx.lineJoin = 'round';
 ctx.fillStyle = '#c34b2b';
 ctx.strokeStyle = '#263a72';

 ctx.fill();
 ctx.stroke();
 };

运行效果：

随机生成100个

我们把原来那个三角形也随机生成在画布上

function drawTriangle(x, y, w, h, bW, bC, fC , z1){
    var z1 =parseInt( Math.random()*20);
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x + w,y+h/2);
    ctx.lineTo(x + z1, y - h);
    ctx.closePath();
    
    ctx.lineWidth = bW;
    ctx.fillStyle = fC;
    ctx.strokeStyle = bC;
    
    ctx.fill();
    ctx.stroke();
}
for (let i = 0; i < 100; i++) {
    let x = Math.random()* can1.width,
        y = Math.random()* can1.height,
        w = Math.random()*21 + Math.random()*20,
        h = Math.random()*23 + Math.random()*19;
    drawTriangle( x,y,w,h,2,'#8ab62f','#fba670');
}

三角形也随机生成了

随机生成三角形