在画布上删除

我试图创建和删除事件的弧，添加部分工作正常，我将它们保存在数组中，所以我可以通过某种方式调用事件侦听器来删除它们，我的意思是它的工作在控制台作为数组值精由其在画布代码更新不及时递减：在画布上删除

<script> 
    var myCanvas = document.getElementById("myCanvas"); 
    myCanvas.width = window.innerWidth; 
    myCanvas.height = 500; 
    var c = myCanvas.getContext("2d"); 
    var myArr = []; 

    myCanvas.addEventListener("click", function(){  
     var x = event.x; 
     var y = event.y; 
     var radius = 10; 
     myArr.push(new CreateCircle(x, y, radius, "#34495e")); 
     console.log(myArr); 

    }); 

    window.addEventListener('keydown', function(){ 
     myArr.splice(0,1); 
     console.log(myArr); 
    }); 

    function CreateCircle(x, y, radius, color) { 
     this.x = x; 
     this.y = y; 
     this.radius = radius; 
     this.color = color; 

     this.draw = function() { 
      c.beginPath(); 
      c.arc(this.x, this.y, this.radius, 0, Math.PI*2); 
      c.fillStyle = this.color; 
      c.fill(); 
     } 
     this.draw(); 
    } 


</script>

我是否需要在构造函数中添加删除功能，并调用它的keydown事件，我怎么继续做/修复它？

来源

2017-08-12 tankit88

如果是该keydown的处理程序，在那里你拼接数组，你永远不会更新画布，这需要完全重画来更新 – adeneo

完成重画来更新？我不遵循？像刷新功能？ – tankit88

如果您想从画布中移除某些内容，则必须重绘整个画布而不是这些部分。有多种方法可以清除画布的某些部分，但通常只需使用更新重新绘制整个画面。 – adeneo

要删除圈子，您必须清除画布，然后使用修改后的圆形阵列重新绘制它。

首先，从CreateCircle方法返回一个对象，所以你有一些工作。这里不需要实例。

其次，你可以通过重置它的宽度清除画布，然后根据阵列上重绘，这样

var myCanvas = document.getElementById("myCanvas"); 
 
myCanvas.width = window.innerWidth; 
 
myCanvas.height = 500; 
 
var c = myCanvas.getContext("2d"); 
 
var myArr = []; 
 

 
myCanvas.addEventListener("click", function() { 
 
    var x = event.x; 
 
    var y = event.y; 
 
    var radius = 10; 
 
    myArr.push(CreateCircle(x, y, radius, "#34495e")); 
 
}); 
 

 
window.addEventListener('keydown', function() { 
 
    myArr.splice(0, 1); 
 
    myCanvas.width = myCanvas.width; 
 
    myArr.forEach(function(circle) { 
 
    CreateCircle(circle.x, circle.y, circle.r, circle.c) 
 
    }) 
 
}); 
 

 
function CreateCircle(x, y, radius, color) { 
 
    c.beginPath(); 
 
    c.arc(x, y, radius, 0, Math.PI * 2); 
 
    c.fillStyle = color; 
 
    c.fill(); 
 

 
    return {x: x, y: y, r: radius, c: color}; 
 
}

<canvas id="myCanvas"></canvas>

来源

2017-08-12 11:55:53 adeneo

你能帮我解答一下我的疑问吗？ – tankit88

你不更新任何地方的画布。你需要创建一些“渲染”功能，它将清除先前渲染的帧，然后循环遍历数组中的所有圆圈并调用。

提示： context.clearRect方法可用于清除画布。

来源

2017-08-12 11:49:43

在画布上删除

回答

相关问题