基礎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>

484411_3440050209801_2085273331_n
  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)

如果想填漸層色。
css3 gradient
  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換成漸層填色。

另外也可以畫出指定的圖片。>480194_3440051129824_1759528490_n
  1. var img=new Image();   
  2.     img.onload = function(){   
  3.     cxt.drawImage(img,0,0);   
  4. };   
  5. img.src="Firefox.png";  

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

留言