canvas(二)

渐变

线性渐变

var grd = cxt.createLinearGradien(x, y, x1, y1);
grd.addColorStop(位置, color)

径向渐变

  • 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容