HTML 5 Canvas 畫笑臉

利用html 5 cancas語法，繪製笑臉圖案，除IE6, IE7, IE8不支援外，Chrome 5, Firefox 3.6, Opera 10.6, Safari 5, IE9都支援HTML 5 Canvas。

 

實際顯示：

HTML 5 canvas draw smile face 

 

原始碼：

<html>
<head>
<script>
function drawShape(){
  var canvas = document.getElementById('sf');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.arc(75,75,60,0,Math.PI*2,true); // 臉
    ctx.fillStyle = "#F00";
    ctx.fill();	
    ctx.moveTo(76,85);		
    ctx.arc(76,85,35,0,Math.PI,false);   // 笑容	
    ctx.lineWidth=2;	
    ctx.closePath();	
    ctx.fillStyle = "#FD0";
    ctx.fill();
    ctx.strokeStyle= "#000"; 
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(55,65);
    ctx.arc(50,65,5,0,Math.PI*2,true);  // 左眼
    ctx.moveTo(108,65);
    ctx.arc(103,65,5,0,Math.PI*2,true);  // 右眼
    ctx.fillStyle = "#03F";
    ctx.fill();	
    ctx.lineWidth=2;
    ctx.strokeStyle= "#000";
    ctx.stroke();	
    ctx.closePath();
  } else {
    alert('您的瀏覽器不支援HTML 5 Canvas');
  }
}
</script>
</head>
<body onLoad="drawShape()" >
<canvas id="sf" width="250" height="250"></canvas>
</body>
</html>

 

參考資料：

https://developer.mozilla.org/En/Canvas_tutorial/Drawing_shapes

arrow
arrow
    全站熱搜

    jon6773 發表在 痞客邦 留言(0) 人氣()