1、canvas标签
<canvas width="" height=""
id="">
您的浏览器不支持canvas，请更换浏览器！
*注：canvas的宽高度最好设置成行内样式，不然会等比变化
例如：在嵌入样式中设置canvas 宽高为：500px X 500px
在canvas中画100px * 100px 的矩形，矩形宽高会等比变化
500/300 : 500/150 = x/100 : y/100;
</canvas>
2、默认宽度300px，默认高度 150px
3、canvas绘图环境设置
getContext("2d"); 目前支持2d绘图环境
/*
var can = document.getElementById("can");
var cxt = can.getContext("2d"); //2d绘图环境，提供api[stroke、fill、etc.]
*/
4、绘图路劲:
beginPath()
:开始路劲
closePath():结束路劲
//形成一个闭合路径
moveTo(x,y):将触笔移动到x,y点
lineTo(x,y):绘制到x,y点
/*绘制三角形*/
//一个起点，两个终点
stroke(): 触笔方法
画线 默认为黑色 绘制一个空心的矩形
fill():填充方法
绘制一个实心的矩形
rect(x,y,w,h):矩形路劲/*x
=> 横坐标 y => 纵坐标 w => 宽度 h=> 高度 */
/*
cxt.rect(50,50,100,100);
cxt.stroke();
*/
save():保存路劲
restore():恢复路劲
/*相当于开辟一个新的空间，把这个内容放在新的空间里，画完在释放出来*/
5、绘制矩形：
fillRect(x,y,w,h) 填充实心矩形
/*cxt.fillRect(50,50,100,100);*/
strokeRect(x,y,w,h) 绘制空心矩形 /*cxt.strokeRect(50,50,100,100);*/
clearRect(x,y,w,h) 清楚矩形选区
/*cxt.clearRect(0,0,can.width,can.height);清除整个canvas选区*/
6、设置绘图样式：
fillStyle: 填充颜色
strokeStyle: 触笔颜色
/*cxt.strokeStyle = "#03f";cxt.strokeRect(50,50,100,100);*/
lineWidth: 触笔宽度(线宽)
/*cxt.lineWidth = 10*/
两者同时使用时显示与书写顺序有关：
7、图形边界样式：
lineJoin : 边界连接点样式
miter(默认值),round(圆角),bevel(斜角)
/*ctx.lineJoin="round";*/lineCap: 端点样式
butt(默认值),round(圆角),square(高度多出线宽一半)
/*ctx.lineCap="round";*/8、绘制圆形：
arc(x,y,r,0,360,false)
x,y 圆心坐标位置
r 圆半径
0,360 从0度到360度
绘制一个圆形
true/false 顺时针/逆时针绘图
/*cxt.arc(250,250,50,0,360,false);*/
9、绘制曲线
arcTo(x1,y1,x2,y2,r)
x1,y1 坐标一 x2,y2坐标二 r圆弧半径
quadraticCurveTo(dx,dy,x1,y1)
10、 贝塞尔曲线:dx,dy控制点 x1,y1结束坐标
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二
x1,y1结束坐标
11、canvas变换
translate(x,y)
坐标基准点偏移 : 从起始点为基准，移动到当前位置
rotate(弧度): 旋转 弧度公式
：角度*Math.PI/180
scale : scale(wb,hb)缩放比例(缩放canvas绘制的图片)
相对于前一个进行缩放
定义和用法
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。
- 中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
- 起始角：arc(100,75,50,0,1.5*Math.PI)
- 结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
JavaScript 语法：
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数值
| 参数 | 描述 |
|---|---|
| x | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| sAngle | 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。 |
| eAngle | 结束角，以弧度计。 |
| counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。 |
12、
绘制图片
图片预加载，获取图片文件
onload中调用
drawImage(img,x,y,w,h);绘制图片(图片,坐标x,坐标y,宽度,高度)
设置背景
createPattern(img,平铺方式)
平铺方式:repeat,repeat-x,repeat-y,no-repeat
13、颜色渐变
线性渐变:createLinearGradient(x1,y1,x2,y2)
x1,y1起始坐标点
x2,y2结束坐标点
径向渐变:createRadialGradient(x1,y1,r1,x2,y2,r2)
x1,y1,r1内圆坐标及半径
x2,y2,r2外圆坐标及半径
addColorStop(位置,颜色)
位置:渐变点 0-1之间
可多个
线性渐变：
径向渐变：
14、绘制文本
strokeText(文本,x,y); 绘制空心文本
fillText(文本,x,y); 绘制实心文本
font = "font-size font-family" 注:尺寸
字体缺一不可
textAlign =
"";文本左右对齐方式
start center end left right
textBaseline文本上下对齐方式
alphabetic 默认。文本基线是普通的字母基线。
top 文本基线是em方框的顶端。。
hanging 文本基线是悬挂基线。
middle 文本基线是em方框的正中。
ideographic 文本基线是表意基线。
bottom 文本基线是em方框的底端。
measureText(文本).width; 文本实际宽度(只有宽度值)
15、阴影
shadowOffsetX,shadowOffsetY x轴、y轴偏移
shadowBlur 阴影模糊度
shadowColor 阴影颜色
默认颜色:rgba(0,0,0,0)
16、像素
createImageData(sx,sy)
创建新的、空白的 ImageData对象
getImageData(x1,y1,sx,sy)【必须是同源，同一域名下】
返回 ImageData对象，该对象为画布上指定的矩形复制像素数据 putImageData(img,x2,y2)
把图像数据（从指定的 ImageData对象）放回画布上
17、合成
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
source-over默认。在目标图像上显示源图像。
source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over在源图像上方显示目标图像。
destination-atop在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter显示源图像 + 目标图像。
copy显示源图像。忽略目标图像。
xor使用异或操作对源图像与目标图像进行组合。
18、将画布导出为图片
火狐、谷歌浏览器右键菜单可直接导出为图片
toDataURL
19、事件
isPointInPath(x,y)
如果指定的点位于当前路径中，返回布尔值
只能判断最后绘制出来的图片