使用画布制作矩形覆盖图像 [英] Make rectangle overlay image with canvas

问题描述

我想使用HTML5 canvas完成以下操作：

I'd like to reach the following with 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();

为什么我绘制的矩形不覆盖先前的图像？
当重新加载网站时，有时候画布会有所不同。

Why does the rectangular I'm drawing not overlay the previous image? It's also weird that the canvas is drawn differently sometimes when reloading the site..

推荐答案

在异步回调中绘制onload。

You have the image being drawn in the asynchronous callback onload. The result will change depending on if the image loads first, or the canvas draw is called first.

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

Try moving your draw code into the same callback.

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

For more efficient clipping you can use the non-zero winding order rule: http://blogs.adobe.com/webplatform/2013/01/30/winding-rules-in-canvas/

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

TLDR: Consecutive canvas draw calls will add or subtract from the previous calls depending on whether the order of points is clockwise or anti-clockwise.

请参阅： 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();

上述示例使用顺时针点顺序绘制矩形，然后使用逆时针点顺序。弧法的最后一个参数定义了逆时针。在这种情况下是真的。

The above example draws a rectangle with a clockwise point order, then subtracts the arc (circle) by using an anti-clockwise point order. The last argument of the arc method defines 'anti-clockwise'. In this case true.

编辑：这不需要绘制两次。效率，FTW。

This negates the need to draw twice. Efficiency, FTW.

这篇关于使用画布制作矩形覆盖图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！