Question

是否可以使用图案（可重复的纹理）填充透明度的png？

这是一个将图像加载到画布上的简单示例，只是不确定如何用图案填充它，如果不可能那么有没有办法从png中提取路径？

<script>
    var c = document.getElementById("a");
    var ctx = c.getContext("2d");

   var test= new Image();
    test.src = "images/test.png";
    test.onload = function() {
        ctx.drawImage(test, 0, 0);
    };
</script>

<body>
    <canvas id="a"></canvas>
</body>

我还创建了一个jsfiddle，其中包含一个实际加载的png

这是我希望实现的效果 enter image description here

更新

基于Simon Sarris回答的工作实例 http://jsfiddle.net/sergeh/G8egW/6/

Answer 1

首先，将图像绘制到Canvas。

然后执行globalCompositeOperation = 'source-in';

然后绘制图案。它只存在于图像所在的位置。

http://jsfiddle.net/G8egW/2/

如果在此之前画布上已有东西，则需要在内存画布上执行上述操作，然后将该画布绘制到普通画布上。像这样：

http://jsfiddle.net/G8egW/5/

（注意网格中的差异）

用可重复的纹理填充图像

更新

1 个答案: