Pages

0

筆記 - Html5 畫扇形


點選上面這張圖片就可以看到效果~

這是利用 html5 + javascript 所做出來的扇形
如果你的瀏覽器不支援，就會出現瀏覽器不支援的文字提醒
最近在練習繪製形狀的時候，並沒有見到繪製扇形的介紹
所以做個筆記以免自己忘記...
原理其實不難，主要還是基礎的 canvas 的繪圖方式，
重點只是將角度與顏色的參數，利用 javascript 移到外面，
如此就可以在外部控制參數產生相對應的扇形，
而可以發想出的相關應用感覺好像數之不盡，
以後練習出來後再慢慢分享~

<script>
  var Canvas = document.getElementById("canvas");
  draw1(0,60,1);
  draw1(60,80,2);
  draw1(80,150,3);
  draw1(150,230,4);
  draw1(230,300,5);
  draw1(300,360);
  function draw1(startangle,endangle,color){ 
    var context = Canvas.getContext("2d");
    context.beginPath();
    context.lineWidth=10;
    if(color==1){context.fillStyle="red";}
    else if(color==2){context.fillStyle="blue";}
    else if(color==3){context.fillStyle="green";}
    else if(color==4){context.fillStyle="#aaa";}
    else if(color==5){context.fillStyle="#0cc";}
    else{context.fillStyle="#ffdd00";}
    context.lineCap="round";
    context.moveTo(215,100);
    context.arc(215,100,100,(Math.PI/180)*startangle,(Math.PI/180)*endangle,false);
    context.lineTo(215,100);
    context.fill();
    context.closePath();
  }
</script>

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言