canvas基础学习笔记

1.什么是canvas      

1.1 canvas 相关概念

1、HTML5 标签，表示画布，作为图像绘制的容器 canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 脚本如JavaScript 内部完成

2、画布是一个矩形区域，您可以控制其每一像素。

3、canvas DOM对象，像所有的dom对象一样Canvas 对象有自己本身的属性、方法和事件。

canvas dom 属性

属性名	描述	默认值
width	画布的宽度	300
height	画布的高度	150

画布获取方法

方法名：getContext

参 数：contextID：画布上绘制的类型，当前唯一的合 法值是 "2d"

返回值：一个 CanvasRenderingContext2D 对象，使用 它可以绘制到 Canvas 元素中

实例：document.getElementbyId('XXX').getContext('2d')

1.2 canvas元素特性

canvas可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸【width，height设置】：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

示例：

canvas_base_1未显示设置width，height取默认值300*150,通过css设置尺寸为200*200，比例不一致此时绘制图形变形

2.canvas API 

样式：颜色、样式、阴影

矩形：绘制、清除

路径

转换

文本

图形

像素操作

合成

API参考地址： http://www.w3school.com.cn/tags/html_ref_canvas.asp

3.图形绘制-矩形绘制

矩形绘制通过apI方法可直接绘制矩形

fillRect()

strokeRect()

实例

<script type="text/javascript">     var _canvas =   document.getElementById('canvas');     var ctx = _canvas.getContext('2d');     ctx.fillRect(25,25,100,100);//绘制填充矩形     ctx.clearRect(45,45,60,60);//清除60*60的像素     ctx.strokeRect(50,50,50,50);//绘制无填充矩形 </script>

输出结果

4.图形绘制-路径绘制

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的

路径绘制的步骤

1、首先，你需要创建路径起始点。beginPath()、moveTo（）

2、然后你使用画图命令去画出路径。

3、之后你把路径封闭。closePath()

4、一旦路径生成，你就能通过描边或填充路径区域来渲染图形。stroke()-线条来绘制图形轮廓、fill()-填充路径的内容区域生成实心的图形

5.变形

5.1.状态保存和恢复

save()：保存状态

restore()：恢复状态

Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括：

• 当前应用的变形
• strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
• 当前的裁切路径（clipping path）

你可以调用任意多次 save 方法。 每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。

5.2.移动

定义：移动canvas原点到一个指定的位置

方法：translate(x, y) -> x 是左右偏移量，y 是上下偏移量。

坐标描述

5.3.旋转

定义：以原点为中心旋转 canvas

方法：rotate(a) -> 旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。

说明：旋转的中心点始终是 canvas 的原点，可通过translate改变原点位置

坐标描述

5.4.缩放

定义：它来增减图形在 canvas 中的像素数目，即对形状，位图进行缩小或者放大rotate(a)

方法：scale(x,y)-> x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。

5.5.变形

定义：对变形矩阵直接修改 ，[scale,tranlate,rotate是独立的方法,但实际上他们之所以能产生变化,都是因为他们操作了矩阵.而canvas的transform,就是直接操作矩阵,所以理论上效率还比前面说的这些方法要高]

每个图形都有矩阵，一个图形默认矩阵是(1,0,0,1,0,0)，1为缩放比例

方法：transform(a, b, c, d, e, f)：

参数说明：(scaleX,skewX,skewY,scaleY,transX,transY);

(skewX,skewY)表示斜切也叫拉伸：什么是斜切?把一个矩形的任一条边用力一拉,变成平行四边形,这就是斜切.使用tanθ求值

备注:参数里面没有定义旋转的参数——>旋转的效果是斜切配合缩放实现的

变形矩阵说明：

那ax+cy+e的意义是什么？ 位移:假设矩阵matrix(1, 0, 0, 1, 30, 30)则假设原点是(0, 0)，中心点坐标从(0, 0)变成了→(30, 30)

缩放：假设矩阵matrix(s, 0, 0, s, 0, 0)则x' = s*x+0*y+0 = s*x; y' = bx+dy+f = 0*x+s*y+0 = s*y; s表示缩放比例,x表示原始缩放比例，默认为1

旋转：假设矩阵matrix(cosθ,sinθ,-sinθ,cosθ,0,0)则x' = x*cosθ-y*sinθ+0;y' = x*sinθ+y*cosθ+0；y表示原始旋转弧度数，默认为1；θ为旋转的度数-》总结是说旋转需要前四个参数协作

斜切(拉伸)：假设矩阵为matrix(1,tan(θy),tan(θx),1,0,0)则x' = x+y*tan(θx)+0 = x+y*tan(θx) y' = x*tan(θy)+y+0 = x*tan(θy)+y，其中θx表示x轴倾斜的角度，θy表示y轴θx表示x轴倾斜的角度，θy表示y轴