HTML5畫布

HTML5提供了畫布的標籤(Canvas)讓我們可以在上面畫東西,不過它本身並不具備繪圖的能力,所以繪畫的部份必須透過JavaScript來完成。

基本語法為:

<canvas id="myCanvas" width="320" height="480">
Your browser does not support the canvas element.
</canvas>

Your browser does not support the canvas element.

網路上大部份的範例語法都是分開來的,不過其實畫筆可以一直畫下去。範例的詳細說明請參考程式中的註解。插入圖片的部份,我只有在用Opera瀏覽器時有成功顯示(一個WordPress的圖示);但是W3Schools的範例卻可以正常顯示,原因目前不太清楚。範例JavaScript的繪圖語法如下:

var c = document.getElementById("myCanvas");    //取得myCanvas畫布
var pen = c.getContext("2d");   //提起畫筆

//黃色矩形
pen.fillStyle = "#FFFF00";  //設定顏色
pen.fillRect(50,50,380,220);    //從(50,50)開始畫一個380x220的矩形

//紅色圓形
pen.fillStyle = "#FF0000";  //設定顏色
pen.beginPath();    //啟動封閉路徑
pen.arc(50, 50, 20, 0, Math.PI*2, true);    //圓心位置在(50,50),半徑20
pen.closePath();    //結束封閉路徑
pen.fill();     //填充路徑

//黑線
pen.fillStyle = "#000000";  //設定顏色
pen.moveTo(200, 200);   //將畫筆移至(200,200)
pen.lineTo(150, 150);   //畫線至(150,150)
pen.lineTo(300, 80);    //畫線至(300,80)
pen.stroke();   //用筆繪製

//綠色漸層
var grd = pen.createLinearGradient(280,270,480,320);    //宣告漸層範圍
grd.addColorStop(0, "#FFFFFF"); //設定漸層色
grd.addColorStop(1, "#00FF00");
pen.fillStyle = grd;        //將漸層色指定給畫布
pen.fillRect(280, 270, 200, 50);    //畫矩形

//藍色半透明矩形
pen.fillStyle = "rgba(0, 0, 200, 0.5)";
pen.fillRect(25, 245, 50, 50);

//圖片
var img = new Image();  //宣告圖片常件
img.src="http://www.moke.tw/wordpress/wp-includes/images/wpmini-blue.png";  //載入圖片
pen.drawImage(img, 150, 20);    //將圖片放在畫布上

參考網站:W3Schools、Mozilla Developer Network 1 2