canvas day-03

文字

• strokeText(text, x, y)
• fillText(text. x, y)
• font
• textAlign
• textBaseline

图片

• 插入图片 drawImage(img, x, y)
• 插入图片设置大小 drawImage(img, x, y, width, height)
• 插入图片的一部分到画布 drawIamge(img, sx, sy, swidth, sheight, x, y, width, height)

canvas 阴影

• shadowColor
• shadowBlur
• shadowOffsetX
• shadowOffsetY

渐变

• 线性渐变 createLinearGradient(x1, y1, x2, y2)
  addColorStop()

Canvas基础

• 划线
• 矩形
• 填充
• 描边
• 文字
• 弧

Canvas进阶

阴影

渐变

线性渐变

径向渐变

• createRadiaGradient(x1, y1, r1, x2, y2, r2)
• addColorStop()

把背景图片作为填充

• createPattern(imgDom, repeate)
• 第二个参数 repeate/ repeat-x / repeat-y / no-repeat

变换

缩放

• sacle(x, y)

位移

• translate(x, y)

旋转

• rotate(angle)

环境的保存和恢复

• save()
• restore()

设置透明

• globalAlpha = number 设置不透明度
• 全局设置是对整个画布（绘图环境） 进行设置

限定绘图区域

• clip()

输出base64编码

• canvas.toDataURL(type, encoder)
• type为mime类型 image/jpeg image/gif image/png image/webp

画布渲染画布

把一个画布以图片的形式用 drawImage() 插入到另一个画布
这是一种canvas的优化手段

设置线条

• lineCap 属性 设置线条两端的形状 butt/round/square
• lineJoin 属性 设置线条夹角 miter/bevel/round
• miterLimit 属性 设置夹角斜角的最大长度 一般默认 10