如何在带有背景图像的画布上画一条线

Question

我正在尝试在画布中画一条线（我可以做到），但我想使用背景图像在线上放置重复图案（除非有另一种方法可以将重复背景图像放置在画布中的线上？ ）。

如何用背景图像绘制一条线？

我理解剪切的概念，但这似乎只适用于形状......而不适用于笔画。有任何想法吗？

这是我正在尝试的 jsfiddle http://jsfiddle.net/Z9cd7/

    function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

var radius = 50;
var x = 100;
var dx = 10;
var y = 100;
var dy = 10;
var delay = 10;
var img = new Image();
img.onload = function () {
    var canvas1 = document.getElementById("image");
    var ctxImg = canvas1.getContext("2d");
    ctxImg.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);

    /*
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.beginPath();
    ctx.arc(100, 100, radius, 0, 2 * Math.PI, false);
    ctx.clip();
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    ctx.restore();
    */
    ctx.moveTo(0,0)
    ctx.lineTo(100,100)
    ctx.lineWidth = 10;
    ctx.stroke()

    ctx.clip();
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    ctx.restore();

    //animate();
}
img.src = "http://lh3.ggpht.com/_Z-i7eF_ACGI/TRxpFywLCxI/AAAAAAAAAD8/ACsxiuO_C1g/house%20vector.png";

Answer 1

我有点晚了，但由于不需要使用剪切或计算矢量，您也许可以考虑使用对此的内置支持（速度更快），只需设置带有图像图案作为样式的笔划样式：

var pattern = ctx.createPattern(image, 'repeat');  /// create pattern
ctx.strokeStyle = pattern;                         /// set as stroke style

ctx.moveTo(10, 10);
ctx.lineTo(200, 200);
ctx.lineWidth = 10;
ctx.stroke();                           /// strokes with the image as background

演示 1 在这里

如果您想更改图案大小，只需更改image您在本例中使用的画布（“”）的大小：

<canvas id="image" width=100 height=100></canvas>

通过修改处理程序，onload图像可以缩放以适合画布：

ctxImg.drawImage(img, 0, 0, canvas1.width, canvas1.height);

演示 2 在这里

如果您需要在绘制时调整图案的位置，您可以使用translate()增量值，您首先使用该值进行平移，然后减去您想要使用图案绘制的线条的位置 - 这将使线条保持在相同的位置和之前一样翻译，但移动模式本身：

ctx.translate(dx, dy);
ctx.moveTo(x1 - dx, y1 - dy);
ctx.lineTo(x2 - dx, y2 - dy);
...