程式碼如下:
var ctx=document.getElementById('myCanvas').getContext('2d'); ctx.translate(75,100);//移動畫布的原點,預設值(0,0) ctx.rotate(-Math.PI*18/180); //旋轉畫布-18度 drawStar(ctx,Math.floor(60));//繪製星星 function drawStar(ctx,r){ ctx.save(); ctx.fillStyle = '#0ff';//設定填滿顏色 ctx.beginPath();//開始繪製路徑 ctx.moveTo(r,0);//移動至第一個點 for (var i=0;i<9;i++){ mydraw(ctx,i,r); } ctx.closePath();//關閉路徑 ctx.fill();//填色 ctx.restore(); } function mydraw(ctx,i,r){ ctx.rotate(Math.PI/5); if(i%2 == 0) { ctx.lineTo((r/0.525731)*0.200811,0); } else { ctx.lineTo(r,0); } }
canvas的原理是「射後不理」,也就是畫了就不管了,沒辦法單獨對物件進行後續的操作。因此要在繪製物件之前,先進行畫布(context)的處理,例如縮放,旋轉...