canva重复图案

最新推荐文章于 2024-10-01 20:01:18 发布

qq_27449993

最新推荐文章于 2024-10-01 20:01:18 发布

阅读量541

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_27449993/article/details/107230398

版权

前端专栏收录该内容

114 篇文章

订阅专栏

canvas的createPattern()可以用于绘制重复图案，它可以接收image元素、canvas元素或video元素作为图案参数，并且可以传入如何重复图案的字符串参数：

repeat    ——    为整个区域绘制重复图案
repeat-x    ——    只在x方向绘制重复图案
repeat-y    ——    只在y方向绘制重复图案
no-repeat    ——    不重复，只绘制一张图案

   var can = document.createElement('canvas')
            can.width = this.clip.width
            can.height = 1
            var con = can.getContext('2d')
            var pat = con.createPattern(resources.get(imgList[imgList.length - 1].url), 'repeat-y')
            return pat

  var context = this.context
            context.save()
            context.translate(this.clip.x,0)
           //  context.clearRect(this.clip.width,0,this.clip.width, this.clip.height)
             context.fillStyle = pat
            context.fillRect(0, 0, this.clip.width, this.clip.y)
            context.fill()
            context.restore()