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



    
    Document
    


    
        
    
    


你可能感兴趣的:(canvas环境的保存和恢复及进度条实例)