canvas绘图如何在绘制的无规则图形内填充图片

首先：利用canvas的beginPath、moveTo、lineTo、closePath方法去绘制一个你想要的图形！

ctx.beginPath()
ctx.moveTo(points[0][0], points[0][1])
points.forEach((item, i) => {
    if (i != 0) {
        ctx.lineTo(item[0], item[1])
    }
})
ctx.closePath()
ctx.strokeStyle = "rgba(15, 206, 233, 1)";
ctx.stroke()

遇到的问题：这时候一定要用 stroke() 来结束绘制；(这里就是我遇到的坑  我没有用stroke收尾直接填充图片 用fill()结束 没有效果 也尝试了其他方式 都不行！)

然后：再去填充图片 用createPattern方法去填充图片！

ctx.fillStyle = ctx.createPattern(img, 'repeat')
ctx.fillStyle = "rgba(80, 168, 225, 0.69)"
ctx.fill()

这里可能就有一些对canvas不熟的小伙伴 再次遇到坑！

遇到的问题：img如何配置   配置完img  没有效果! 直接上代码！

let img = new Image();
img.src = require('../assets/images/map/carway.png')
img.onload = function () {
    ctx.beginPath()
    ctx.moveTo(points[0][0], points[0][1])
    points.forEach((item, i) => {
        if (i != 0) {
            ctx.lineTo(item[0], item[1])
        }
    })
    ctx.closePath()
    ctx.strokeStyle = "rgba(15, 206, 233, 1)";
    ctx.stroke()
}

这里一定要用到img.onload 的方法去包着  不然会遇到img 时有时无的问题

对你有用给个赞呗！