canvas操作指南

接口指南

获取渲染上下文

var ctx = canvas.getContext('2d')

绘制形状

fillRect(x, y, width, height)
strokeRect(x, y, width, height)
clearRect(x, y, width, height)

绘制路径

beginPath() // 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath() // 闭合路径之后图形绘制命令又重新指向到上下文中。
stroke() // 通过线条来绘制图形轮廓。
fill() //通过填充路径的内容区域生成实心的图形。
moveTo() // 移动笔触
lineTo() // 画线到一个地方
arc(x, y, radius, startAngle, endAngle, anticlockwise) // 绘制圆弧
arc(x1, y1, x2, y2, radius)  // 绘制圆弧
quadraticCurveTo(cp1x, cp2y, x, y) // 2  次贝赛尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) //  3次贝赛尔曲线
rect() // 矩形

Path2D 对象

new Path2D()
new Path2D(path)
new Path2D(d); // 从SVG 建立Path对象

色彩

ctx.fillStyle  // 填充颜色
ctx.strokeStyle // 设置轮廓颜色
ctx.globalAlpha  // 设置全局的透明度

线型

ctx.lineWidth
ctx.lineCap
ctx.lineJoin  // 连接处的样式
ctx.miterLimit // 限制当两条线相交时交接处的最大长度
ctx.getLineDash // 返回一个包含当前虚线样式，长度为非负偶数的数组
setLineDash 设置当前虚线样式
lineDashOffset 设置虚线样式的起始偏移量

渐变

createLinearGradient(x1, y1, x2, y2)
createRadialGradient(x1, y1, r1, x2, y2, r2)
addColorStop(position, color)

图案

createPattern(image, type)

阴影

shadowOffsetX
// shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
shadowOffsetY
shadowBlur
//用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
shadowColor
// 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

canvas填充规则

当我们用fill api时刻，我们可以设置填充规则，

绘制文本

fillText()
strokeText()
// 文本样式
font
textAlign
textBaseline
direction
// 测量文字长度
measureText()

使用图片

drawImage(image, x, y）
drawImage(image, x, y， width， height) // 绘制图片
drawImage(image, sx, sy, swidth, sheight, dx, dy, dWdith, dHeight) // 前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小

注意： 控制图像的缩放行为， mozImageSmoothingEnabled 值为 false 时，图像不会平滑地缩放。默认是 true

状态保存和恢复

save() 保存当前状态
restore() 恢复上一个保存的状态
// 变形
translate(x, y)  // 它用来移动 canvas 和它的原点到一个不同的位置。
rotate(angle)
scale(x, y) 
transforms() // 矩阵变换
setTransform()
resetTransform()

组合

globalCompositeOperation //这个属性设定了在画新图形时采用的遮盖策略
clip()

像素

ImageData 对象
有width height Data属性

getImageData(left, top, width, height)
putImageData(myImageData, dx, dy)
toDataURL()
toBlob()

注意：imageSmoothingEnabled 反锯齿