代码如下:
<div>
<canvas id="aa" height="280" width="400"></canvas>
</div>
<script>
var aa=document.getElementById("aa").getContext("2d");
aa.shadowBlur=6;
aa.shadowColor="gray";
aa.shadowOffsetX=7;
aa.shadowOffsetY=5;
function createStar(context,n,dx,dy,size){
context.beginPath();
var dig=Math.PI/n*4;
context.moveTo(dx,size+dy);
for(var i=0;i<=n;i++){
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
context.lineTo(x*size+dx,y*size+dy);
}
context.fill();
context.closePath();
}
aa.fillStyle="red";
createStar(aa,3,60,60,50);
aa.fillStyle="green";
createStar(aa,5,160,60,50);
aa.fillStyle="blue";
createStar(aa,7,260,60,50);
aa.fillStyle="orange";
createStar(aa,9,360,60,50);
</script>
效果图如下: