這個(gè)星期被調(diào)到別的項(xiàng)目組專門做了一會(huì)兒前端，沒辦法，人太少，我也只能硬著頭皮上...
說起來，html5的canvas真的好用，可以畫色塊，可以嵌入圖片，可以通過定位在圖片上寫字等等
舉例如下

1. 在html中定義一個(gè)canvas，例如<canvas id='my_canvas' width=300 height=150></canvas>
   <font color='red'>如果不顯式定義width和height，那么canvas會(huì)用它默認(rèn)的寬和高，分別是300，150.并且這里width和height是不帶單位的哦</font>

2. 有了這個(gè)canvas后，我們就可以在js中畫圖。

var canvas = document.getElementById('my_canvas');
//獲得canvas對(duì)象
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畫布正中間填充一個(gè)100*50的藍(lán)色矩形
//offset_x和offset_y為相對(duì)于畫布左上角的偏移量
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; //假設(shè)字體是方正的啦..
ctx.fillText(text, offset_x, offset_y);

效果如下：

image

當(dāng)字體小于12px的時(shí)候，chrome瀏覽器會(huì)仍然以12px顯示，所以當(dāng)想要顯示小字體的時(shí)候，一個(gè)方法就是利用canvas的scale方法，可以再建一個(gè)canvas專門用來放文字，然后通過z-index實(shí)現(xiàn)層疊的效果。