简单介绍
HTML5 中最让人兴奋的特性是 canvas — 那个用来作画的东东。在你的页面中插入 canvas 就像插入其他标记一样平常，但你将需要一些编程 的经验来绘制形状、图表、动画、游戏、图片作品等。
兼容性
在除 IE 外的所有现代浏览器（Firefox 3, Safari 3.1, Chrome 2, and Opera 9.6）都支持 Canvas。你可以使用 ExplorerCanvas 这个 Javascript 解决方案来为 IE 添加这个新特性。
canvas 标签只是图形容器，您必须使用脚本来绘制图形。
canvas 的历史
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的
东西都绘制到一块画布上。
canvas 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS
X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 canvas 标记。
我们甚至可以在 IE 中使用 canvas 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。
canvas 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进，目前 canvas 已经成为 HTML 5 草案中一个正式的标签。
canvas 标记和 SVG 以及 VML 之间的差异
canvas 标记和 SVG 以及 VML 之间的一个重要的不同是，canvas 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML
文档来描述绘图。
这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容
易编辑，只要从其描述中移除元素就行。
要从同一图形的一个 canvas 标记中移除元素，往往需要擦掉绘图重新绘制它。
使用 canvas 标记绘制简单图形
大多数 Canvas 绘图 API 都没有定义在 canvas 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。
Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc()
方法。
一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。
width
设置 canvas 的宽度。
height
设置 canvas 的高度。
canvas API
| 方法 / 属性 | 使用方法 | 描述 |
| getContext() |
var canvas =
document.getElementById("canvas"); var ctx = canvas.getContext("2d"); |
获取绘制环境 返回一个用于在画布上绘图的环境。 |
| save() |
ctx.save();
|
绘制状态 保存路径 |
| restore() |
ctx.restore();
|
绘制状态 恢复路径 |
| scale() |
ctx.scale(x, y);
//x轴缩放比例|y轴缩放比例 |
转换 缩放 |
| rotate() |
ctx.rotage(radian);
//radian 弧度=角度*Math.PI/180 |
转换 旋转角度 |
| translate() |
ctx.translate(x, y);
//x轴的位移|Y轴的位移 |
转换 偏移 |
| transform() |
ctx.transform(a, b, c, d, e, f);
// // |
转换 变换 |
| setTransform() |
ctx.setTransform(a, b, c, d, e, f);
|
转换 设置变换 |
| globalAlpha |
ctx.globalAlpha = 0.8;
|
转换 透明度 |
| globalCompositeOperation |
ctx.globalCompositeOperation = "";
|
转换 透明度 |
| fillStyle |
ctx.fillStyle = "#ff0000";
|
颜色和边框 设置绘图的背景颜色 |
| strokeStyle |
ctx.strokeStyle = "blue";
|
颜色和边框 在绘制的图形上添加边框颜色 |
| addColorStop() |
ctx.addColorStop(offset, color）
//offset 位置|color 颜色值 |
颜色和边框 在绘制的图形上添加边框颜色 |
| createLinearGradient() |
ctx.createLinearGradient(x,y,w,h); //x轴位置|y轴位置|渐变宽度|渐变高度 |
颜色和边框 创建一个渐变 |
| createRadialGradient() |
ctx. createRadialGradient (x0, y0, r0, x1, y1, r1); // |
颜色和边框 在绘制的图形上添加边框颜色 |
| createPattern() |
ctx.createPattern (img, repeatition); //img 图片对象 //repeatition 平铺方式 |
颜色和边框 在绘制的图形上添加边框颜色 |
| lineWidth |
ctx.lineWidth = 10;
|
边界 设置绘制的图形边框 |
| lineJoin |
ctx.lineJoin = "round"; //3种格式miter|round|bevel //默认|圆角|斜角 |
边界 设置绘制的图形的辩解样式 |
| lineCap |
ctx.lineCap = "round"; //3种格式 butt|round|square //默认|圆角|高度多出线宽的一半 |
边界 设置绘制的图形的辩解样式 |
| miterLimit |
ctx.miterLimit = ""; |
边界 边框斜切限制 |
| shadowColor |
ctx.shadowColor = "red"; |
投影 投影颜色 |
| shadowOffsetX |
ctx.shadowOffsetX = 10; |
投影 投影的水平位移 |
| shadowOffsetY |
ctx.shadowOffsetY = 10; |
投影 投影的垂直位移 |
| shadowBlur |
ctx.shadowBlur = 10; |
投影 投影的模糊大小 |
| fillRect() |
ctx.fillRect(x,y,w,h);
|
绘制矩形 在画布上填充黑色背景 |
| strokeRect() |
ctx.strokeRect(x,y,w,h);
|
绘制矩形 在画布上绘制一个带边框的矩形 |
| clearRect() |
ctx.clearRect(x,y,w,h);
|
绘制矩形 清除指定范围内的内容 |
| beginPath() |
function draw(){ beginPath(); //.... closePath(); } |
绘制路径 开始绘制一个新的路径，避免与后面绘制的路径重叠，在填充或者话边框的时候就会出现问题。 在绘制好路径之后用closePath() 来关闭路径；如果在填充路径时没有关闭，那么context就会自动调用closePath关闭路径。 |
| closePath() |
代码同上
|
绘制路径 关闭路径，如果不设置最后一个点，则默认以第一个点结束。 |
| moveTo() |
ctx.moveTo(120, 120);
//x, y
|
绘制路径 移动到绘制的新目标点，设置一个新的点 |
| lineTo() |
ctx.lineTo(220, 320);
//x, y
|
绘制路径 新的目标点 |
| quadraticCurveTo() |
ctx.quadraticCurveTo (cpx, cpy, x, y); //贝赛尔曲线 控制点|坐标点 |
绘制路径 新的目标点 |
| bezierCurveTo() |
ctx. bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y); //贝赛尔曲线 控制点|控制点|坐标点 |
绘制路径 新的目标点 |
| arc() |
ctx.arc(x, y, r, s, e, d); //x,y,半径,起始弧度,结束弧度,旋转方向 //旋转方向:false[顺时针],true[逆时针] |
绘制路径 画一个圆 |
| arcTo() |
ctx.arc(x1, y1, x2, y2, r); //第一组坐标|第二组坐标|半径 |
绘制路径 画一个圆 |
| rect() |
ctx.rect(); //x,y,w,h |
绘制路径 绘制一个矩形 |
| fill() |
ctx.fill(); //填充，默认黑色 |
绘制路径 把lineTO()设置的点区域用默认颜色填充成一个图形 |
| stroke() |
ctx.stroke(); //画线，默认黑色 |
绘制路径 把lineTO()设置的点连接起来 |
| clip() |
ctx.clip(); // |
绘制路径 |
| isPointInPath() |
ctx.isPointInPath(); // |
绘制路径 |
| drawFocusRing() |
ctx.drawFocusRing (ele, canDrawCustom); // |
集中管理 |
| setCaretSelectionRect() |
ctx.setCaretSelectionRect (ele, x, y, w, h); // |
插入符和选择器管理 |
| caretBlinkRate() |
ctx.caretBlinkRate() // |
插入符和选择器管理 |
| font |
ctx.font="" // |
文本 设置字体类型 |
| textAlign = "" |
ctx.textAlign = "" //start, end, left, right, center //def:start |
文本 文本对齐方式 |
| textBaseline |
ctx.textBaseline="" //def:alphabetic |
文本 |
| fillText() |
ctx.fillText (text, x, y[, maxWidth ]) // |
文本 设置填充的文本 |
| strokeText() |
ctx.strokeText (text, x, y[, maxWidth ]) // |
文本 |
| measureText() |
var metrics = ctx.measureText(text); metrics . width // |
文本 |
| drawImage() |
drawImage(image,dx,dy) drawImage(image,dx,dy,dw,dh) drawImage(image,sx,sy,sw,sh, dx,dy,dw,dh) // |
图片操作 在画布上载入一张图片 |
| createImageData() |
createImageData(sw,sh) // |
图片操作 |
| createImageData() |
createImageData(imageData) // |
图片操作 |
| getImageData() |
var imageData = createImageData(sx,sy,sw,sh) imageData.width imageData.height imageData.data // |
图片操作 |
| putImageData() |
putImageData(imageData,dx,dy[, dirtyX,dirtyY,dirtyWidth, dirtyHeight]) // |
图片操作 |
| 绘制模型 |
||
canvas 注意事项
- 先后顺序[就像ps里面的图层]
- 模块化编写代码或者是组件式
- 注意绘制图形的开始和结尾
- 设置canvas的宽高要在行内设置；如果在样式里面设置，画布会根据样式里面的宽高等比例缩放，而不是真正的宽高【canvas默认宽高：300*150】
canvas 资料
canvas 线上应用
- 腾讯微博