canvas 繪製星星

程式碼如下：

  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)的處理，例如縮放，旋轉...