HTML5之canvas绘图

介绍

Canvas 是 HTML5 新增的一个标签 <canvas> </canvas>,可以使用 JavaScript 在网页上绘制一个画布。

可见支持率还是不错的！

应用场景（实现业务上）

动画
游戏
视频（因为生产环境还不成熟，略）
截图
合成图
分享网页截图
滤镜
抠图
旋转、缩放、位移、形变
粒子
将canvas转换为图片 -- toDataURL

基本使用

画直线

<canvas id="myCanvas" width="200" height="100"></canvas>

var myCanvas=document.getElementById("myCanvas");
var ctx=myCanvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

效果：

一个画布在网页中是一个矩形框，默认绘制出来的画布大小为300×150像素的HTML元素。

注意: 默认情况下 (canvas) 元素没有边框和内容。

画圆形

var myCanvas=document.getElementById("myCanvas");
var ctx=myCanvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

效果：

随机三角形

// 随机三角形
var canvas=document.getElementById("myCanvas");
var context = canvas.getContext('2d'); 
var width = canvas.width;
var height = canvas.height; 
// 随机三个坐标点
var positionA = [width * Math.random(), height / 2 * Math.random()];
var positionB = [width / 2 * Math.random(), height / 2 + height / 2 * Math.random()];
var positionC = [width / 2 + width / 2 * Math.random(), height / 2 + height / 2 * Math.random()];
// 开始绘制
context.beginPath();
context.moveTo(positionA[0], positionA[1]);
context.lineTo(positionB[0], positionB[1]);
context.lineTo(positionC[0], positionC[1]);
context.closePath();
// 绘制，由于默认宽度就是1像素，因此
// context.lineWidth设置缺省
context.stroke();

效果：

刮刮卡效果

查看源码

参考资料

因为有些API需要在http环境下才能成功调用，比如toDataURL()、getImageData()等。所以我们需要自行用工具启动。