用canvas制作矩形叠加图像

我想用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(); 

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

Answer 1

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

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

为了更有效地进行削波，您可以使用非零绕组顺序规则： http ： //blogs.adobe.com/webplatform/2013/01/30/winding-rules-in-canvas/

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

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