var canvas = document.getElementById("canvas");

canvas.width = 800;
canvas.height = 800;

var ctx = canvas.getContext("2d");
ctx.fillStyle = "f00";
ctx.fillRect(0,0,canvas.width,canvas.height);

for(var i = 0; i < 200;i++) {
    var r = Math.random() * 10 + 10;
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var a = Math.random() * 360;
    drawStar(ctx,x,y,r,r/2.0,a);
}
ctx.lineCap = "butt";  //round square
//ctx.lineJoin = "bevel";  // 平角效果

//ctx.lineJoin = "round";  // 圆角效果

ctx.lineJoin = "miter";  // 尖角限制
ctx.miterLimit = 20;

//drawStar(ctx,20,50,400,400,0);

function  drawStar(cx,r,R,x,y,rot) {
    cx.beginPath();

    for(var i = 0; i < 5; i++) {
        cx.lineTo(Math.cos((18 + i*72 - rot)/180 * Math.PI) * R + x,
            -Math.sin((18 + i*72 - rot)/180 * Math.PI) * R + y
        );
        cx.lineTo(Math.cos((54 + i*72 - rot)/180 * Math.PI) * r + x,
            -Math.sin((54 + i*72 - rot)/180 * Math.PI) * r + y
        )
    }
    cx.closePath();
    cx.fillStyle = "fb3";
    cx.strokeStyle = "fd5";
    cx.lineWidth = 3;
    cx.fill();
    cx.stroke();
}