Fatal编程技术网
  • javascript/
  • Javascript 如何在html5画布中删除形状而不是上下文

Javascript 如何在html5画布中删除形状而不是上下文

javascript canvas

Javascript 如何在html5画布中删除形状而不是上下文,javascript,canvas,paperjs,Javascript,Canvas,Paperjs,我需要使用另一个笔刷工具擦除任何形状（如圆形、矩形），但不是整个上下文 var brush = new Path.Circle({ center: event.point, radius: 35, fillColor: 'red', }); var eraser = new Path.Circle({ center: event.point, radius: 35 }); 我尝试了“目的地退出”、“clearRect”，但没有任何效果。我需要的结果完全相

我需要使用另一个笔刷工具擦除任何形状（如圆形、矩形），但不是整个上下文

var brush = new Path.Circle({
    center: event.point,
    radius: 35,
    fillColor: 'red',
});
var eraser = new Path.Circle({
    center: event.point,
    radius: 35
});
我尝试了“目的地退出”、“clearRect”，但没有任何效果。我需要的结果完全相似的附加图像

您可以使用第二个画布，在那里您将绘制背景，然后，由于在复合模式顶部的
目的地，只保留此图像所需的圆圈，您将其绘制回主画布



var橡皮擦=功能（evt）{
var x=evt.clientX-this.offsetLeft；
var y=evt.clientY-this.offsetTop；
oCtx.globalCompositeOperation='source over'；
oCtx.drawImage（img，0,0）；
oCtx.globalCompositeOperation='destination-top'；
oCtx.beginPath（）；
弧（x，y，25，0，数学π*2）；
oCtx.fill（）；
ctx.drawImage（offCan，0,0）；
}
main.addEventListener（'mousemove'，橡皮擦）；
var ctx=main.getContext（'2d'）；
var offCan=main.cloneNode（真）；
var oCtx=offCan.getContext（'2d'）；
var draw=function（）{
ctx.drawImage（这个，0,0）；
ctx.fillStyle='红色'；

对于（var i=0；它有很多优点。我将尝试以下方法：）