html5清除画布代码,清除HTML5 Canvas中的圆形区域

Daniel Kapla..

9

鉴于要求,这些答案都很好.但是,让我们说你和我一样,你有额外的要求:

您想要"清除"可能部分超出您正在清除的形状范围的形状的一部分.

您希望在形状下方看到背景而不是清除背景.

对于第一个要求,解决方案是使用context.globalCompositeOperation = 'destination-out' 蓝色是第一个形状,红色是第二个形状.如您所见,destination-out从第一个形状中删除该部分.

这是一些示例代码:

explosionCanvasCtx.fillStyle = "red"

drawCircle(explosionCanvasCtx, projectile.radius, projectile.radius, projectile.radius)

explosionCanvasCtx.fill()

explosionCanvasCtx.globalCompositeOperation = 'destination-out' #see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

drawCircle(explosionCanvasCtx, projectile.radius + 20, projectile.radius, projectile.radius)

explosionCanvasCtx.fill()

下面是这个潜在的问题:第二个fill()将清除一切在它之下,包括背景.有时您只想清除第一个形状,但仍希望看到它下面的图层.

解决方法是drawImage在临时画布上绘制它,然后将临时画布绘制到主画布上.代码如下所示:

diameter = projectile.radius * 2

console.log ""

explosionCanvas = $("")

explosionCanvasCtx = explosionCanvas[0].getContext("2d")

explosionCanvasCtx.fillStyle = "red"

drawCircle(explosionCanvasCtx, projectile.radius, projectile.radius, projectile.radius)

explosionCanvasCtx.fill()

explosionCanvasCtx.globalCompositeOperation = 'destination-out' #see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

durationPercent = (projectile.startDuration - projectile.duration) / projectile.startDuration

drawCircle(explosionCanvasCtx, projectile.radius + 20, projectile.radius, projectile.radius)

explosionCanvasCtx.fill()

explosionCanvasCtx.globalCompositeOperation = 'source-over' #see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

ctx.drawImage(explosionCanvas[0], projectile.pos.x - projectile.radius, projectile.pos.y - projectile.radius) #center