画布canvas

1.简介

canvas是HTML5新增的一个标签，主要在页面上显示一块区域，但是这块区域有别其他框架标签，它表现为一块可以绘制图形的画布，结合canvas的API和JavaScript一起完成canvas画布的图形绘制功能。闭合标签内编辑的内容只有当浏览器不支持canvas标签的时候才会显示。

2. canvas常用的基本方法

save()：保存当前环境的状态

restore()： 返回之前保存过的路径状态和属性

createEvent()：创建一个事件

getContext()：获取上下文对象，并获取其API执行相应操作

toDataURL()：返回当前canvas画布图像的url

颜色、样式和影响属性和方法：

•属性

fillStyle:设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle:设置或返回用于笔触的颜色、渐变或模式

shadowColor:设置或返回用于阴影的颜色

shadowBlur:设置或返回用于阴影的模糊级别

shadowOffsetX:设置或返回阴影距形状的水平距离

shadowOffsetX: 设置或返回阴影距形状的垂直距离

•方法

createLinearGradient(): 创建线性渐变（用在画布内容上）

createPattern():在指定的方向上重复指定的元素

createRadialGradient():创建放射状/环形的渐变（用在画布内容上）

addColorStop():规定渐变对象中的颜色和停止位置

canvas线条样式属性:

lineCap: 设置或返回线条的结束端点样式

lineJoin: 设置或返回两条线相交时，所创建的拐角类型

linewidth: 设置或返回当前的线条宽度

miterLimit: 设置或返回最大斜接长度

canvas矩形操作的方法:

rect():创建矩形

fillRect(): 绘制被填充的矩形

strokeRect():绘制矩形(无填充)

clearRect():在给定的矩形内清除指定的样式

canvas路径绘制方法

fill():填充当前绘图（路径）

stroke():绘制已定义的路径

beginPath():起始一条路径，或重置当前路径

moveTo():把路径移动到画布中的指定点，不创建线条

closePath():创建从当前点回到起始点的路径

lineTo():添加一个新点，然后在画布中创建从该点到最后指定点的线条

clip():从原始画布剪切任意形状和尺寸的区域

quadraticCurveTo():创建二次贝塞尔曲线

bezierCurveTo():创建三次方贝塞尔曲线

arc():创建弧/曲线（用于创建圆形或部分圆）

arcTo():创建两切线之间的弧/曲线

isPointInPath():如果指定的点位于当前路径中，则返回 true，否则返回 false

canvas转换操作的方法

scale():缩放当前绘图至更大或更小

rotate():旋转当前绘图

translate():重新映射画布上的 (0,0) 位置

transform():替换绘图的当前转换矩阵

setTransform():将当前转换重置为单位矩阵。然后运行 transform()

canvas文本属性和方法

属性:

font: 设置或返回文本内容的当前字体属性

textAlign: 设置或返回文本内容的当前对齐方式

textBaseline: 设置或返回在绘制文本时使用的当前文本基线

方法:

fillText():在画布上绘制“被填充的”文本

strokeText():在画布上绘制文本（无填充）

measureText():返回包含指定文本宽度的对象

canvas图像绘制的方法

drawImage():向画布上绘制图像、画布或视频

canvas像素操作属性和方法

属性：

width: 返回ImageData 对象的宽度

height: 返回ImageData 对象的高度

data: 返回一个对象，其包含指定的 ImageData对象的图像数据

方法：

createImageData():创建新的、空白的 ImageData 对象

getImageData():返回 ImageData对象，该对象为画布上指定的矩形复制像素数据

putImageData():把图像数据（从指定的 ImageData 对象）放回画布上

3.canvas阴影属性

4.canvas颜色渐变

线性渐变:createLinearGradient(x,y,x1,y1)

参数：xy表示开始点的坐标，x1y1表示释放点的坐标

addColorStop(value,color)：指定渐变色,value取值为0-1之间

径向渐变:createRadialGradient(x,y,r,x1,y1,r1)

参数：xy表示开始圆心位置，x1y1表示结束圆心位置，r和r1表示开始结束的圆半径

addColorStop(value,color)：指定渐变色,value取值为0-1之间

5.canvas画布转换

(1)基本方法：

save():保存当前环境状态

restore():返回之前保存过的路径状态和属性

rotate():旋转当前绘图

translate():重新映射画布上的 (0,0) 位置

transform():替换绘图的当前转换矩阵

scale():缩放当前绘图至更大或更小

（2）转换基本步骤：

①保存当前的状态，开始新的状态：context.save();

②重置新画布的0,0点：context.translate(x，y);

③让重置后的画布旋转一定角度：context.ratate(弧度);(正角度顺时针旋转，反之逆时针)

④绘制要绘制的图形（从表从新的画布坐标进行定位）

⑤回到之前保存的画布状态：context.restore();