<canvas id="canvas" style="margin:50px auto">

对不起你的浏览器不支持canvas

</canvas>

<script>

window.οnlοad=function(){

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

canvas.width=800;

canva.height=800;

var context=canvas.getContext("2d");

drawStar(context,150,300,400，400,30);

}

function drawStar(cxt,r,R,x,y,rot){//r:表示小圆的半径，R：表示大圆的半径，x表示在x轴的偏移量y表示在Y轴上的偏移量，rot表示旋转的角度

cxt.lineWidth=10px;

cxt.beginPath();

for(var i=0;i<5;i++){

   cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);//在大圆上点的坐标

   cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);//在小圆上点的坐标

}

cxt.closePath();//闭合五角星

cxt.stroke();

}

</script>

//绘制矩形的方法有：context.rect(),context.fillRect(x,y,width,height)和context.strokeRect(x,y,width,height)