HTML5画布用圆圈填充图像

Question

我读到了用图像填充HTML5画布圆的这篇文章，对做一些不同的事情很好奇。

一步一步，我想: 1.把这张我的盾牌照下来。

1. 跟踪盾牌的轮廓以获得形状。3.用第二幅较大的图像来填充盾牌的轮廓。我不想让它合身。我只想让它观察盾的轮廓所设定的边界，而不是画在外面。

到目前为止，我拥有的是：JSFiddle -轮廓形状。

var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function () {

    // draw the image
    // (this time to grab the image's pixel data
    ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2);

    // grab the image's pixel data
    imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    data = imgData.data;

    // call the marching ants algorithm
    // to get the outline path of the image
    // (outline=outside path of transparent pixels
    points = geom.contour(defineNonTransparent);

    ctx.strokeStyle = "red";
    ctx.lineWidth = 2;

    redraw();

}
img.src = "https://cdn1.iconfinder.com/data/icons/shield-4/744/1-512.png";

// redraw the canvas
// user determines if original-image or outline path or both are visible
function redraw() {

    // clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // draw the image

    ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2);

    // draw the path (consisting of connected points)    
    // draw outline path
    ctx.beginPath();
    ctx.moveTo(points[0][0], points[0][1]);
    for (var i = 1; i < points.length; i++) {
        var point = points[i];
        ctx.lineTo(point[0], point[1]);
    }
    ctx.closePath();
    ctx.stroke();
    ctx.fillStyle="yellow";  // Just filling with yellow temporarily but would like to use an image
    ctx.fill();
}

我不知道如何在大纲内画而不覆盖它。

Answer 1

我使用上下文保存、剪辑和恢复解决了这个问题。新琴

ctx.save();        
ctx.clip();
loadnewimage();
ctx.restore();