canvas 基础知识

canvas 基础

低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas.

检测支持canvas

<canvas id="canvas" width="150" height="200" >
	你的浏览器不支持canvas
</canvas>
var canvas = document.getElementById('canvas');
if(canvas.getContext) alert('支持canvas');

api

绘制矩形

var canvas = document.getElementById('canvasnode');
var ctx = canvas.getContext('2d');	
ctx.fillRect(x, y, width, height); //绘制填充矩形 需先设置ctx.fillStyle = #a00;
ctx.strokeRect(x, y, width, height); //绘制描边矩形 需先设置ctx.strokeStyle = #ccc, ctx.lineWidth = 2;
ctx.clearRect(x, y, width, height); //清除矩形区域 ~常用来不断的清空画布和重绘来实现动画效果

注：canvas的尺寸最好通过 标签内的width, height设置，用css设置的话效果类似放大了画布和画布上的内容

绘制路径

ctx.beginPath(); //开始路径
路径是以一组子路径（直线、弧线等）的形式存储的，每次调用beginPath(),子路径组都会被重置，然后可以绘制新的图形

ctx.closePath(); //闭合路径 会尝试用直线连接当前端点和开始端点来闭合路径，若路径本身已闭合或只有1个点 则closePath()什么也不做，闭合路径不是必须的。

ctx.stroke(); //描边路径

ctx.fill(); //填充 开放路径将自动闭合，而无需调用ctx.closePath();

ctx.moveTo(x, y); //移动画笔

ctx.lineTo(x, y); //从当前上下文点画直线

ctx.arc(x, y, radius, startAngle, endAngle, antiClockwise); //绘制弧线或圆 角度(圆周上的每个点对应一个角度，顺时针方向增大 0.5* Math.PI为半圆的下端点，0*Math.PI为半圆的右端点)

绘制曲线 贝塞尔和二次方曲线

quadraticCurveTo(cx, cy, x, y); //3个点(上下文点 1个控制点 1个端点)
bezierCurveTo(cx1, cy1, cx2, cy2, x, y); //4个点 （上下文点 2个控制点 1个端点)

canvas中使用图像

//创建图片
var img = new Image();
img.onload = function(){
	context.drawImage(img, 100,100);
}
img.src = url;
~~ or img.src = dataUrl; 注意dataUrl方式加载的图片优点：图片即时显示不用http请求；缺点：不能被缓存
//如：img.src = 'data:image/gif;base64,R01GOD....'

//drawImage()渲染图片到canvas上。
drawImage(imageObj, x, y); //从哪个位置开始渲染图片

//图片缩放
drawImage(imageObj, x, y, width, height); //从哪个位置以多大尺寸渲染图片 width, height指图片的大小

图片切片 可以只渲染图片的一部分都canvas上 有点CSS sprite的味道
对图片裁切(切片)后，以指定的位置和大小渲染到画布
drawImage(imageObj, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); //切片开始位置，切片大小， 目标放置位置， 目标大小

半透明

context.globalAlpha = 0.3; //全局透明度
context.strokeStyle = 'rgba(255,0,0,0.3)'; //半透明颜色实现半透明度
context.fillStyle = 'rgba(255,0, 0, 0.3)';

线型 笔刷设置

ctx.lineWidth = "3"; //线条大小
ctx.lineCap = 'round'/'square'/'butt'; //线段端点样式
ctx.lineJoin = 'round'/'bevel'/'miter'; //两线段连接处的样式
ctx.miterLimit = "10"; //lineJoin = 'miter' 时，线段延长相交的最大值

渐变

var grd = context.createLinearGradient(x1, y1, x2, y2); //创建线性渐变 指定渐变起点和终点
var grd = context.createRadialGradient(x1, y1, r1, x2, y2, r2); //创建径向渐变 指定2个圆

创建渐变对象后,就可以用addColorStop()方法添加色标了。
grd.addColorStop(pos, color); pos：0~1的值

图案 图案填充

var pat = context.createPattern(image, type); // type: repeat / repeat-x /repeat-y / no-repeat
如：
var img = new Image();
img.onload = function(){
	var ptn = context.createPattern(img, 'repeat');
}
img.src = url;

阴影

context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.shadowBlur = 2
context.shadowColor = 'rgba(0,0,0,0.5)';

保存和恢复canvas的状态

canvas状态栈, 调用context.save(),则当前状态入栈，调用context.restore()则顶端状态出栈，成为当前状态。

context.save()
context.restore()
canvas状态包括：
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor

移动 translate

context.translate(x, y); //移动canvas的原点到新的位置

旋转 rotate

context.rotate(angle); //旋转canvas

缩放 scale

context.scale(xZoom, yZoom);

变形 transform 变换矩阵

context.transform(m11, m12, m21, m22, dx, dy);
变换矩阵为:
m11	m21 dx
m12 m22 dy
0 0	1

组合 compositing, 图形的组合

通常我们绘制多个图形时，总是一个图形绘制在另一个图形上，这样是不够的，图形的堆叠被绘制顺序限制

context.globalCompositeOperation = ..
~~ 当前绘制的图形是source, 之前存在的图形为destination
source-over: 默认值 新图形覆盖在旧的内容上。
destination-over: 原有内容在上面
source-in: 新图形与原有内容重叠部分，显示新图形的，其余部分透明
destination-in:
source-out: 新图形与原有内容不重叠部分，显示新图形的，其余部分透明
destination-out:
source-atop:新图形与原有内容重叠部分会被绘制，并覆盖在上面
destination-atop:新图形与原有内容重叠部分会被绘制，原有内容覆盖在上面
lighter: 两图形重叠部分加色
darker: 两图形重叠部分减色
xor: 重叠部分变透明
copy: 新图形被保留 其他的清除。

裁切路径 clip

context.beginPath();
context.arc(0, 0, 60, 0, 2 * Math.PI, true);
context.clip(); //绘制路径 然后裁切，从而控制绘图的范围

基本动画

canvas的动画是通过不断的重绘来实现的
绘制动画帧常用的操作
清空canvas
context.clearRect(x,y,width,height);

保存状态

context.save()

context.restore()

setTimeout, setInterval实现不断重绘