标签
<canvas width="" height="" id="">
，请更换浏览器！
</canvas>
150px
绘图环境设置
绘图环境
绘图路径:
beginPath() :开始路径
closePath():结束路径
moveTo(x,y):将触笔移动到x,y点
lineTo(x,y):绘制到x,y点
stroke(): 触笔方法 画线 默认为黑色
fill():填充方法
rect(x,y,w,h):矩形路径
绘制矩形：
fillRect(x,y,w,h) 填充实心矩形
strokeRect(x,y,w,h) 绘制空心矩形
clearRect(x,y,w,h) 清除矩形选区
设置绘图样式：
fillStyle: 填充颜色
strokeStyle: 触笔颜色
lineWidth: 触笔宽度(线
图形边界样式：
lineJoin : 边界连接点样式
miter(默认值),round(圆角),bevel(斜角)
lineCap: 端点样式
butt(默认值),round(圆角),square(高度多出线宽一半)
绘制圆形：
arc(x,y,r,0,360,false)
x,y 圆心坐标位置
r 圆半径
0,360 从0度到360度绘制一个圆形 (弧度)
(弧度: 角度值*Math.PI/180)
true/false 逆时针/顺时针绘图
宽)
canvas变换
translate(x,y)
坐标基准点偏移 : 从起始点为基准，移动到当前位置
rotate(弧度): 旋转 弧度公式 ：角度*PI/180
scale(1,1)
save():保存路径
restore():恢复路径
绘制图片
图片预加载，获取图片文件
顾名思义，WEB中的预加载就是在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。
onload中调用
drawImage(img,x,y,w,h);绘制图片(图片对象,坐标x,坐标y,宽度,高度)
设置背景
createPattern(img,平铺方式)
平铺方式:repeat,repeat-x,repeat-y,no-repeat
颜色渐变
线性渐变: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之间 可多个
绘制曲线
arcTo(x1,y1,x2,y2,r)
x1,y1 坐标一 x2,y2坐标二 r圆弧半径 quadraticCurveTo(dx,dy,x1,y1)
贝塞尔曲线:dx,dy控制点 x1,y1结束坐标
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二
x1,y1结束坐标
绘制文本
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; 文本
阴影
shadowOffsetX,shadowOffsetY x轴、y轴偏移
shadowBlur 阴影模糊度
shadowColor 阴影颜色
默认颜色:rgba(0,0,0,0)
translate(x,y)
坐标基准点偏移 : 从起始点为基准，移动到当前位置
rotate(弧度): 旋转 弧度公式 ：角度*PI/180
scale(wb,hb)缩放比例(缩放canvas绘制的图片)
实际宽度(只有宽度值)
像素
createImageData(sx,sy)
创建新的、空白的 ImageData 对象
getImageData(x1,y1,w,h)
返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 putImageData(img,x2,y2)
把图像数据（从指定的 ImageData 对象）放回画布上
合成
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
source-over默认。在目标图像上显示源图像。
source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over在源图像上方显示目标图像。
destination-atop在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter显示源图像 + 目标图像。
copy显示源图像。忽略目标图像。
xor使用异或操作对源图像与目标图像进行组合。
将画布导出为图片
火狐、谷歌浏览器右键菜单可直接导出为图片
toDataURL
事件
isPointInPath(x,y)
如果指定的点位于当前路径中，返回布尔值
只能判断最后绘制出来的图片