用画布制作矩形覆盖图像

Question

我想用 HTML5 画布达到以下效果：

我的代码：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();

上面的例子用顺时针点顺序画了一个矩形，然后用逆时针点顺序减去圆弧（圆）。 arc 方法的最后一个参数定义了“逆时针”。在这种情况下是正确的。

编辑：这消除了绘制两次的需要。效率，FTW。

Answer 2

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

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

drawDday('clip');      
drawDday();