HTML5的新的element，canvas，可以在Browser上繪製圖表/圖片。使用時必須訂出繪製的範圍(width/height)，接著就可以開始用JavaScript進行繪圖了。目前多數支援canvas的browser看來也都只有支援2D，未來應該會有3D的。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas/Simple shapes (rectangles)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>
<script type="application/x-javascript">
// Get a reference to the element.
var elem = document.getElementById('myCanvas');
// 判斷是否能取得context
if (elem && elem.getContext) {
// 你只能對每一個canvas做initialize一次(getContext).
// context = canvas . getContext(contextId [, ... ])
var context = elem.getContext('2d');
if (context) {
// context.fillRect(x, y, w, h)
// 畫方形
context.fillRect(0, 0, 150, 100);
// context.clearRect(x, y, w, h)
// 清方形
context.clearRect(100,50, 50, 50);
// context.strokeRect(x, y, w, h)
// 畫框
context.strokeRect(150,100, 50, 50);
}
}
</script>
</body>
</html>
fillRect(x, y, w, h)使用fillStyle來決定顏色。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas/FillRect attribute</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>
<script type="application/x-javascript">
// Get a reference to the element.
var elem = document.getElementById('myCanvas');
// 判斷是否能取得context
if (elem && elem.getContext) {
// 你只能對每一個canvas做initialize一次(getContext).
// context = canvas . getContext(contextId [, ... ])
var context = elem.getContext('2d');
if (context) {
context.fillStyle = 'pink';
context.fillRect(0, 0, 50, 50);
context.fillStyle = '#f00'; // red
context.fillRect(50, 50, 50, 50);
context.fillStyle = '#0f0'; // green
context.fillRect(100, 100, 50, 50);
context.fillStyle = '#00f'; // blue
context.fillRect(150, 150, 50, 50);
// RGBA(red, green, blue, alpha)
// Alpha1是透明度
context.fillStyle = 'RGBA(100, 100, 255, 0.2)';
context.fillRect(50, 50, 150, 150);
}
}
</script>
</body>
</html>
而strokeRect(x, y, w, h)則會使用strokeStyle(顏色), lineWidth(粗細), lineJoin(連接觸樣式),等屬性來決定，其實就是line style。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas/Line styles</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>
<script type="application/x-javascript">
// Get a reference to the element.
var elem = document.getElementById('myCanvas');
// 判斷是否能取得context
if (elem && elem.getContext) {
// 你只能對每一個canvas做initialize一次(getContext).
// context = canvas . getContext(contextId [, ... ])
var context = elem.getContext('2d');
if (context) {
// The beginPath() starts a new path
context.beginPath();
// reset the path to (0, 0)
context.moveTo(0,0);
context.strokeStyle = '#f00';
// lineWidth是線的大小
context.lineWidth = 1;
context.strokeRect(0, 0, 20, 20);
context.lineWidth = 10;
context.strokeRect(30, 30, 20, 20);
// LineJoin是連接處(轉角)的樣式
context.lineJoin = 'bevel';
context.strokeRect(60, 60, 20, 20);
context.lineJoin = 'round';
context.strokeRect(90, 90, 20, 20);
context.lineJoin = 'miter';
context.strokeRect(120, 120, 20, 20);
}
}
</script>
</body>
</html>
參考資料：
- http://dev.opera.com/articles/view/html-5-canvas-the-basics/
- http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
- https://developer.mozilla.org/en/Canvas_tutorial/Using_images
- http://wiki.moztw.org/%E7%94%A8_Canvas_%E7%95%AB%E5%9C%96
- http://www.w3school.com.cn/htmldom/dom_obj_canvas.asp
source code：
https://github.com/brook-kuo/JavaScript/tree/master/html5/canvas
