Canvas 2D绘图

绘图的时候 drawImage(img, 0 – width / 2, 0 – height / 2);
Canvas 2D绘图
• 准备工作 • 绘制基本图形 • 绘制文字 • 绘制图像 • 高级应用
• • • • • 裁剪 图像叠加 坐标变换 像素计算 动画
高级应用——像素计算
函数 getImageData(x, y, width, height) 说明 读取画板中指定区域的像素数据 示例 context.getImageData(0, 0, 100, 300)
destination：画布上已有的图像
含义 默认值，在destination之上绘制source 在两个图像的交集中绘制source，并清除交集以外区域
source-out
source-atop destination-over destination-in destination-out destination-atop lighter darker xor
高级应用——坐标变换
特别注意： 1. 调用translate,scale,rotate方法时，都是以当前的二维变换矩阵进 行计算，即调用的先后顺序会影响最终结果。 2. 如果要还原到初始的坐标系，调用setTransform(1, 0, 0, 1, 0, 0)。 3. 等价代换：
translate(dx, dy) = setTransform(1, 0, 0, 1, dx ,dy); scale(sx, sy) = setTransform(sx, 0, 0, sy, 0, 0); rotate(deg) = setTransform(cos(deg),-sin(deg),sin(deg),cos(deg),0,0);
• • • • • 裁剪 图像叠加 坐标变换 像素计算 动画
高级应用——裁剪
裁剪的步骤： 1. beginPath() 开始路径绘制 2. 通过arc, rect或者lineTo线段组合绘制要裁剪的路径区域 3. closePath() 闭合路径 4. clip() 设置裁剪 如何还原？ 1. 在裁剪前使用save()，保存画布设置 2. 进行裁剪、绘图操作 3. 使用restore()，还原画布设置
Canvas 2D绘图
Canvas 2D绘图
• 准备工作 • 绘制基本图形 • 绘制文字 • 绘制图像 • 高级应用
• • • • • 裁剪 图像叠加 坐标变换 像素计算 动画
Canvas 2D绘图
• 准备工作 • 绘制基本图形 • 绘制文字 • 绘制图像 • 高级应用
• • • • • 裁剪 图像叠加 坐标变换 像素计算 动画
Canvas 2D绘图
• 准备工作 • 绘制基本图形 • 绘制文字 • 绘制图像 • 高级应用
• • • • 裁剪 图像叠加 坐标变换 动画
高级应用——图像叠加
图像叠加使用globalCompositeOperation参数来设置 source: 要绘制的图像
值 source-over source-in
putImageData(data, x, y, sx, sy, sw, sh)
将指定的像素数据放置到画板x,y 坐标上
context.puImageData(data, 100, 100, 0, 0, 100, 100);
读取到的像素数据为一个以下格式的对象: { width: 600, //图像宽度, height: 400, //图像高度, data: [] //像素数组 } 其中像素数组按照画板上从左到右，从上到下每个点的rgba值排列 *r1, g1, b1, a1, r2, g2, b2, a2, …+ 像素数据与画布无关，可以在不同的画布之间使用
准备工作
创建Canvas对象可以使用 var canvas = document.createElement(‘canvas’); 或者使用页面上已经存在的Canvas对象 var canvas = document.getElementById(‘canvas的id’); 设置Canvas的物理尺寸，可以通过 canvas.width = 400; canvas.height = 300; 或者HTML元素的设置方式 canvas.setAttribute(‘width’, 400); canvas.setAttribute(‘height’, 300); 最后，获取到Canvas的绘图接口 var context = canvas.getContext(‘2d’)
Canvas 2D绘图
• 准备工作 • 绘制基本图形 • 绘制文字 • 绘制图像 • 高级应用
• • • • • 裁剪 图像叠加 坐标变换 像素计算 动画
高级应用——动画
• 动画的本质就是绘制一副与当前状态相符的画面。 • 通常影响画面状态的是时间，但也包括其他参数。 一般用于制作时间动画的逻辑： 1. 动画开始时记录下开始时间。 2. 开始绘制时计算当前时间与开始时间的差。 3. 根据时间差，确定画面中每个元素的位置和状态，并绘制。 4. 在一定的延时之后从步骤2开始再次执行。
copy
清空整个画布，只画上source
Canvas 2D绘图
• 准备工作 • 绘制基本图形 • 绘制文字 • 绘制图像 • 高级应用
• • • • • 裁剪 图像叠加 坐标变换 像素计算 动画
高级应用——坐标变换
函数 translate(dx, dy) scale(sx, sy) rotate(deg) setTransform(m11, m12, m21,m22,dx,dy) 说明 坐标原点移动到dx，dy x轴缩放到sx，y轴缩放到sy 沿坐标原点旋转deg（弧度） 设置平面变换矩阵 示例 context.translate(100, 200); context.scale(1.5, 0.5); context.rotate(90 * Math.PI / 180); context.setTransform(1, 0, 0, 1, 0, 0);
以中心点旋转deg度（角度） translate(图像中心x, 图像中心y) 然后 rotate(deg * Math.PI / 180) 或者
setTransform(rotate(deg * Math.PI / 180), -sin(deg * Math.PI / 180),sin(deg * Math.PI / 180),cos(deg * Math.PI / 180), 图像中心x, 图像中心y);
高级应用——坐标变换
常用的坐标变换 width——图像宽度 height——图像高度 垂直翻转 translate(图像x, 图像y + height) 然后 scale(1, -1) 或者 setTransform(1, 0, 0, -1, 图像x, 图像y + height); 水平翻转 translate(图像x + width, 图像y) 然后 scale(-1, 1) 或者 setTransform(-1, 0, 0, 1, 图像x + width, 图像y)
绘制基本图形——绘制矩形
函数 fillRect(xect(x, y, width, height) 说明 绘制并填充矩形 绘制矩形并画出边框 示例 context.fillRect(0, 50, 100, 200); context.strokeRect(0, 50, 100, 200);
image: 要绘制的图像——图像元素<img>（必须已经加载完毕），也可以是另一个画布<canvas> sx, sy, sw, sh: 原始图像中要绘制的矩形区域x, y, 宽度, 高度 dx, dy, dw, dh: 画到画布上的矩形区域 x, y, 宽度, 高度
Canvas 2D绘图
• 准备工作 • 绘制基本图形 • 绘制文字 • 绘制图像 • 高级应用
绘制基本图形——绘制路径
函数 beginPath() closePath() 说明 开始路径绘制 结束路径绘制
arc(x, y, radius, starAngle,endAngle, anticlockwise) rect(x, y, width, height)
moveTo(x, y) lineTo(x, y) stroke() fill()
在两个图像交集以外的区域绘制source
在两个图像的交集中绘制source 在destination之下绘制source 保留两个图像交集中的destination内容，并清除交集以外区域 保留两个图像交集以外的destination，交集部分清除 在两个图像的交集中绘制source，但source画在destination之下 两个图像交集的部分，颜色值相加 两个图像交集的部分，颜色值相减 交集部分清空，非交集部分双方都保留
Canvas 2D绘图
• 准备工作 • 绘制基本图形 • 绘制文字 • 绘制图像 • 高级应用
• • • • • 裁剪 图像叠加 坐标变换 像素计算 动画
绘制基本图形——基本绘图设置
设置项 context.lineWidth context.fillStyle context.strokeStyle context.globalAlpha 说明 线条宽度 填充颜色 边框颜色 绘图透明度 示例 context.lineWidth = 2; context.fillStyle = ‘#000000’; context.strokeStyle = ‘#ff0000’; context.alpha = 0.7
绘制圆弧 绘制矩形
移动画笔 绘制线段到这个点 绘制路径的边框 填充路径内部区域
绘制基本图形——绘制圆弧
Canvas 2D绘图
• 准备工作 • 绘制基本图形 • 绘制文字 • 绘制图像 • 高级应用