這個星期被調到別的項目組專門做了一會兒前端，沒辦法，人太少，我也只能硬著頭皮上...
說起來，html5的canvas真的好用，可以畫色塊，可以嵌入圖片，可以通過定位在圖片上寫字等等
舉例如下
在html中定義一個canvas，例如
<canvas id='my_canvas' width=300 height=150></canvas>
<font color='red'>如果不顯式定義width和height，那么canvas會用它默認的寬和高，分別是300，150.并且這里width和height是不帶單位的哦</font>有了這個canvas后，我們就可以在js中畫圖。
var canvas = document.getElementById('my_canvas');
//獲得canvas對象
var ctx = canvas.getContext('2d');
//開始繪圖
ctx.beginPath();
var width = canvas.width;
var height = canvas.height;
//把canvas輪廓勾出來
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.strokeRect(0, 0, width, height);
ctx.closePath();
//在canvas畫布正中間填充一個100*50的藍色矩形
//offset_x和offset_y為相對于畫布左上角的偏移量
var offset_x = (width - 100) / 2;
var offset_y = (height - 50) / 2;
ctx.fillStyle = 'blue';
ctx.fillRect(offset_x, offset_y, 100, 50);
ctx.closePath();
//在canvas左上角寫一行字
ctx.beginPath();
ctx.font = '20px 微軟雅黑';
ctx.strokeStyle = 'green';
ctx.textBaseline = 'top';
ctx.strokeText('一行白鷺上青天', 0, 0);
//在canvas右下角寫一行字
ctx.fillStyle = 'red';
ctx.font = '12px FZFSJW—GB1-0';
var text = '小荷才露尖尖角';
var text_w = ctx.measureText(text).width; //字寬
offset_x = width - text_w;
offset_y = height - text_w / 7; //假設字體是方正的啦..
ctx.fillText(text, offset_x, offset_y);
效果如下：
image
當字體小于12px的時候，chrome瀏覽器會仍然以12px顯示，所以當想要顯示小字體的時候，一個方法就是利用canvas的scale方法，可以再建一個canvas專門用來放文字，然后通過z-index實現層疊的效果。
