HTML5：Canvas簡單介紹

IE9，Firefox，Opera，Chrome和Safari 5都支持這個<canvas>元素。
注意：IE8和更早的版本不支持canvas這個元素。




最簡單的Canvas建立code：

宣告canvas的高度及寬度，也可對canvas建立style

<canvas id="myCanvas" width="500" height="300" style="border:1px solid #c3c3c3;">
你的瀏覽器不支援Canvas/*偵測支援度*/
</canvas>


建立js

<script type="text/javascript">
 var c=document.getElementById("myCanvas");/*其中javascript使用id來找到<canvas>對象*/
 var ctx=c.getContext("2d");/*建立一個context對象，來繪制直線，矩形，圓形，字符和圖片等*/

/*下面兩行用來繪制一個黑色的矩形*/
 ctx.fillStyle="#202020";/*矩形颜色*/
 ctx.fillRect(10,10,450, 250);/*指定矩形形状，位置和尺寸*/
</script>

上例中fillRect屬性擁有參數(0,0,150,75)。意思是從左上端(0,0)坐標畫出一個150x75的矩形。

各種繪製canvas的例子：

繪制直線
ctx.moveTo(10,10);
ctx.lineTo(150, 10);
ctx.lineTo(50,80);
ctx.lineTo(250,80);
ctx.stroke();

繪制圓形
ctx.fillStyle="#202020";
ctx.beginPath();
ctx.arc(170,180,80, 0,Math.PI*2,true);
ctx.closePath();
ctx.fill();

繪制漸變效果
var grd=ctx.createLinearGradient(0,0,275, 180);
grd.addColorStop(0,"#000000");
grd.addColorStop(1,"#909090");
ctx.fillStyle=grd;
ctx.fillRect(0,0,450, 250);

繪製圖片
var img=new Image(); 
img.onload = function(){ 
     ctx.drawImage(img, 105, 105); 
}; 
img.src="assets/gbin1.jpg";