基礎html5 canvas

HTML5有一個很特別的東西就是canvas，開始來簡單介紹一下canvas。

首先canvas也是一個tag，然後給他一個id。當瀏覽器不支援canvas時，會顯示被包起來的中間的內容。
<canvas id="myCanvas" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

view plaincopy to clipboardprint?

1. var canvas=document.getElementById("myCanvas");   
2. var cxt=canvas.getContext("2d");   
3. cxt.fillStyle="#ff0000";   
4. cxt.fillRect(0,0,150,75);  

像這樣就可以畫出一個簡單的矩形填色。
fillStyle指的是填色的樣式，這邊用單色填色。
fillRect是畫一個矩形，數值分別代表(x1, x2 ,y1, y2)

如果想填漸層色。

view plaincopy to clipboardprint?

1. var grd=cxt.createLinearGradient(0,0,175,50);   
2. grd.addColorStop(0,"#FF0000");   
3. grd.addColorStop(1,"#00FF00");   
4. cxt.fillStyle=grd;   
5. cxt.fillRect(0,0,175,100);  

把fillStyle換成漸層填色。

另外也可以畫出指定的圖片。>

view plaincopy to clipboardprint?

1. var img=new Image();   
2.     img.onload = function(){   
3.     cxt.drawImage(img,0,0);   
4. };   
5. img.src="Firefox.png";  

跟以前用AS畫圖很像，繼續研究看看。