如何清除画布但保留填充？

现在我的代码就像我想要的那样工作，但是当我创建计时器重绘三角形时，每次调用它时会覆盖一个新的三角形，因此为了停止此操作，我将clearRect放入，但现在它清除了整个画布否定我拥有的黑色填充。我怎样才能添加一个仍然提供移动三角形的相同效果但不需要clearRect的新计时器，或者我该如何修复必须让画布背景保持黑色但每次都不覆盖新三角形的内容？任何帮助表示赞赏！如何清除画布但保留填充？

编辑：我也尝试过两种不同的定时器在一起，而不是为handleClick定时器，却得到了奇怪的结果与三角形的速度，没有人知道这是为什么？：

timer = setInterval(init, 30); 
timer = setInterval(Triangle, 30);

代码：

<html> 
<head> 
<script> 
    var canvas; 
    var context; 
    var triangles = []; 
    function init() { 
     canvas = document.getElementById('canvas'); 
     context = canvas.getContext('2d'); 
     resizeCanvas(); 
     window.addEventListener('resize', resizeCanvas, false); 
     window.addEventListener('orientationchange', resizeCanvas, false); 
     canvas.onclick = function(event) { 
      handleClick(event.clientX, event.clientY); 
     }; 
     timer = setInterval(handleClick, 30); 
    } 
    function Triangle(x,y,color) { 
     this.x = x; 
     this.y = y; 
     this.color = color; 
     this.vx = Math.random() * 10 - 5; //5-3 
     this.vy = Math.random() * 10 - 5; 
     for (var i=0; i < triangles.length; i++) { 
      var t = triangles[i]; 
      t.x += t.vx; 
      t.y += t.vy; 
      if (t.x + t.vx > canvas.width || t.x + t.vx < 0) 
       t.vx = -t.vx; 
      if (t.y + t.vy > canvas.height || t.y + t.vy < 0) 
       t.vy = -t.vy; 
     } 
    } 
    function handleClick(x,y) { 
     context.clearRect(0,0, canvas.width,canvas.height); 
     var colors = ['red','green','purple','blue','yellow']; 
     var color = colors[Math.floor(Math.random()*colors.length)]; 
     triangles.push(new Triangle(x, y, color)); 
     for(i=0; i < triangles.length; i++) { 
      drawTriangle(triangles[i]); 
     } 
    } 
    function drawTriangle(triangle) { 
     context.beginPath(); 
     context.moveTo(triangle.x,triangle.y); 
     context.lineTo(triangle.x + 50,triangle.y + 50); 
     context.lineTo(triangle.x + 50,triangle.y - 50); 
     context.fillStyle = triangle.color; 
     context.fill(); 
    } 
    function resizeCanvas() { 
     canvas.width = window.innerWidth-10; 
     canvas.height = window.innerHeight-10; 
     fillBackgroundColor(); 
     for(i=0; i < triangles.length; i++) { 
      drawTriangle(triangles[i]); 
     } 
    } 
    function fillBackgroundColor() { 
     context.fillStyle = 'black'; 
     context.fillRect(0,0,canvas.width,canvas.height); 
    } 
    window.onload = init; 
</script> 
</head> 
<body> 
    <canvas id="canvas" width="500" height="500"> 
</body> 
</html>

来源

2016-11-28 joelboti

虽然我不是太熟悉的画布，我认为你应该创建将首先清除画布'redraw'方法然后画出你想要的一切，每当你需要做任何改动你改变一些变量并调用重绘方法重绘整个画布。 – Molda

我花了几分钟的时间阅读了你的代码，发现了一件突出的东西。首先，当您调用timer = setInterval(handleClick, 30);时，命令在函数中从上到下运行。所以当我们看这个功能时，你首先画的是黑色背景。然后，你推出一个全新的三角形。在此之后，您使用循环绘制数组中的所有三角形。这是问题所在。你正在做的是绘制所有过去的三角形，在刷新的黑色矩形的顶部。

试试你的代码设置成这样的事情。

function handleClick(x,y) { 
     context.clearRect(0,0, canvas.width,canvas.height); 
     var colors = ['red','green','purple','blue','yellow']; 
     var color = colors[Math.floor(Math.random()*colors.length)]; 
     triangles.push(new Triangle(x, y, color)); 
     triangles.shift(); //This removes the first point in the array, and then shifts all other data points down one index. 
     for(i=0; i < triangles.length; i++) { 
      drawTriangle(triangles[i]); 
     } 
    }

如果我错过了解释你的代码，或者如果你有后续问题，请让我知道。

来源

2016-11-28 22:49:43 bdkopen

如何清除画布但保留填充？

回答

相关问题