javascript - 如何用图像填充用 javascript 创建的形状？

Question

如何用图像填充用 javascript 创建的形状？

我正在使用我用 javascript 创建的形状，现在正在用颜色填充它。我如何替换它并用我选择的图像/gif填充它？

function shape(x,y) {

        ctx.fillStyle = "#9dd4ff";
        ctx.beginPath();
        ctx.moveTo(232,213)
        ctx.lineTo(315,198);
        ctx.lineTo(x,y);
        ctx.closePath();
        ctx.fill();
}

Answer 1

您可以通过将路径用作 MASK 来解决此问题

这是代码

// Create an image element 
var img = document.createElement('IMG');   
// When the image is loaded, draw it 
img.onload = function () {   
    // Save the state, so we can undo the clipping 
    ctx.save();   
    // Create a shape, of some sort 
    ctx.beginPath(); 
    ctx.moveTo(10, 10);
    ctx.lineTo(100, 30); 
    ctx.lineTo(180, 10); 
    ctx.lineTo(200, 60);
    ctx.arcTo(180, 70, 120, 0, 10); 
    ctx.lineTo(200, 180); 
    ctx.lineTo(100, 150);
    ctx.lineTo(70, 180);
    ctx.lineTo(20, 130);
    ctx.lineTo(50, 70);
    ctx.closePath();
    // Clip to the current path 
    ctx.clip();   
    ctx.drawImage(img, 0, 0);   
    // Undo the clipping 
    ctx.restore(); 
}   
// Specify the src to load the image 
img.src = "https://www.google.com/images/srpr/logo3w.png";

Answer 2

尝试这个：

var thumbImg = document.createElement('img');

thumbImg.src = 'path_to_image';



function shape(x,y) {

        ctx.fillStyle = "#9dd4ff";
        ctx.beginPath();
        ctx.moveTo(232,213)
        ctx.lineTo(315,198);
        ctx.lineTo(x,y);


        ctx.drawImage(thumbImg, 0, 0, 50, 50);

        ctx.closePath();
        ctx.fill();
}

- 编辑 -

消除ctx.fillStyle ="#9dd4ff"

正如您需要提及图像的路径。