用画布制作矩形叠加图像

Question

我想通过HTML5 canvas获得以下内容：

我的代码：jsfiddle

// Options
var maxImageWidth = 250,
    maxImageHeight = 196,
    radius = 50;

var canvas = $('#ddayCanvas'),
    canvasWidth = canvas.width(),
    canvasHeight = canvas.height(),
    sectorColor = $('.product-box').css('background-color'),
    context = canvas[0].getContext('2d'),
    imageSrc = canvas.data('image');  


function drawDday (option) {

    var imageObj = new Image();
    imageObj.onload = function() {

        if (option == 'clip'){
            context.save();
            context.clip();
        }

        var imageWidth = imageObj.width,
            imageHeight = imageObj.height;

        if (imageWidth > maxImageWidth){
            imageHeight = imageHeight - (imageWidth - maxImageWidth);
            imageWidth = maxImageWidth;
        }

        if (imageHeight > maxImageHeight) {
            imageWidth = imageWidth - (imageHeight - maxImageHeight);
            imageHeight = maxImageHeight;
        }

        context.drawImage(imageObj, Math.ceil((canvasWidth - imageWidth) / 2), Math.ceil((canvasHeight - imageHeight) / 2), imageWidth, imageHeight);

    };

    imageObj.src = imageSrc;  

}

drawDday(); 

// Why does this rectangle not overlay the previous image?
context.fillStyle = sectorColor;
context.fillRect(0, 0, canvasWidth, canvasHeight);

drawDday('clip');      

context.restore();
context.moveTo(0, 0);
context.beginPath();
context.fillStyle = '#fff';
context.arc(canvasWidth / 2, canvasHeight/2, radius, 0, 2*Math.PI);
context.fill();

为什么我绘制的矩形不会叠加上一张图像？ 在重新加载网站时，画布的绘制方式也不同，这也很奇怪。

Answer 1

您在异步回调onload中绘制了图像。结果将根据图像首先加载，还是首先调用画布绘制而改变。

尝试将您的绘图代码移动到同一个回调中。

为了更有效的裁剪，您可以使用非零绕线顺序规则：http://blogs.adobe.com/webplatform/2013/01/30/winding-rules-in-canvas/

TLDR：连续的画布绘制调用将根据点的顺序是顺时针还是逆时针来增加或减少先前的调用。

请参阅：http://jsfiddle.net/jJjt7/2/

context.fillStyle = sectorColor;
context.rect(0, 0, canvasWidth, canvasHeight);
context.arc(canvasWidth/2, canvasHeight/2, radius, 0, Math.PI*2, true);
context.fill();

上面的示例绘制了一个顺时针点顺序的矩形，然后使用逆时针点顺序减去圆弧（圆）。弧方法的最后一个参数定义为“逆时针”。在这种情况下是真的。

编辑：这样就无需画两次。效率，FTW。

Answer 2

您需要更改您正在绘制对象的顺序。

// Why does this rectangle not overlay the previous image?
context.fillStyle = sectorColor;
context.fillRect(0, 0, canvasWidth, canvasHeight);

drawDday('clip');      
drawDday();