Web 初學者的第七堂課
在網頁上畫畫 -- Canvas
什麼是 Canvas？
沒錯！就是畫布
什麼是 Canvas？
Canvas元素是HTML5的一部分，允許腳本語言動態渲染位圖像。 它最初由蘋果內部使用自己Mac OS X WebKit推出，供應用程序使用像儀錶盤的構件和Safari瀏覽器使用。 後來，有人通過Gecko內核的瀏覽器，Opera和Chrome，和超文本網絡應用技術工作組建議為下一代的網絡技術使用該元素。Novell生產的XForms處理器插件作為Internet Explorer插件支持Canvas 元素。 也有人努力使用VML和JavaScript在Internet Explorer支持Canvas功能而不需要插件。
怎麼用 Canvas？
<canvas> 並不困難，但你需要瞭解基本的 HTML 與JavaScript。 舊版瀏覽器不支援 <canvas>，不過基本上現今所有主流的瀏覽器都有支援。預設的畫布大小是 300px * 150px (寬 * 高)。但你也可以透過 CSS 的寬、高屬性自訂。為了在畫布上作畫，我們使用了一個 javascript context 物件來即時繪製圖形。
怎麼用 Canvas？
大多數 Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上，而是定義在通過畫布的 getContext() 方法獲得的一個「繪圖環境」對象上。
Canvas API 也使用了路徑的表示法。但是，路徑由一系列的方法調用來定義，而不是描述為字母和數字的字符串，比如調用 beginPath() 和 arc() 方法。
一旦定義了路徑，其他的方法，如 fill()，都是對此路徑操作。繪圖環境的各種屬性，比如 fillStyle，說明了這些操作如何使用。
怎麼用 Canvas？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>長條圖 - handsome Sunny!</title>
</head>
<body>
<h1>Sunny so handsome!</h1>
<label for="num">請輸入數字，以逗點分隔</label>
<br>
<input type="text" id="num">
<button type="button" id="ok">確定</button>
<br>
<canvas id="myCanvas" width="1200" height="1200"></canvas>
</body>
</html>
HTMLCanvasElement
- width
- height
- toDataURL()
- toBlob()
- getContext()
CanvasRenderingContext2D
- fillStyle
- fillReact(x,y,w,h)
- clearReact(x,y,w,h)
- fillText(str,x,y)
-
moveTo(x,y)
- lineTo(x,y)
- stroke()
- beginPath()
- arc(x,y,r,sAngle,eAngle,clockwise);
- closePath()
- fill()
來試著在網頁上劃出一個方型吧！
來試著在網頁上劃出一個圓型吧！
填好填滿的圓形
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();Canvas 不只如此！
我們可以在照片上做修改
var src_img = new Image();
src_img.onload = function(){
var c = document.getElementById("myCanvas");
c.width = src_img.width;
c.height = src_img.height+30;
var ctx = c.getContext("2d");
ctx.drawImage(src_img,0,0);
ctx.font="24px sans-serif";
ctx.fillText("Sunny is handsome",15,src_img.height+20);
};
src_img.src = "http://tchinfo.ttu.edu.tw/main/getimage.php?id=slhsieh&Seq=40"var c = myCanvas;
var ctx = c.getContext("2d");
function drawBar(n, l) {
ctx.fillRect(0, n * 22, l * 10, 20);
}
ctx.clearRect(0, 0, c.width, c.height);
num.value.split(",").forEach(function (e, idx){
drawBar(idx, e);
})課堂作業
試著做出折線圖吧！
Web 初學者的第七堂課
By Albert Hsieh
Web 初學者的第七堂課
大同資訊創意研究社系列社課
- 959
