[html5] 初识绘图canvas

这个星期被调到别的项目组专门做了一会儿前端，没办法，人太少，我也只能硬着头皮上...
说起来，html5的canvas真的好用，可以画色块，可以嵌入图片，可以通过定位在图片上写字等等
举例如下

1. 在html中定义一个canvas，例如<canvas id='my_canvas' width=300 height=150></canvas>
   <font color='red'>如果不显式定义width和height，那么canvas会用它默认的宽和高，分别是300，150.并且这里width和height是不带单位的哦</font>

2. 有了这个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实现层叠的效果。