Question

在此示例中，为什么具有相同值的clearRect（）不能完全清除fillRect（）？

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";

setInterval(function(){
	let rect = {x:Math.random()*c.width, y:Math.random()*c.height}
	ctx.fillRect(rect.x, rect.y, 5, 5);
	ctx.clearRect(rect.x, rect.y, 5,5);
},500)

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

Answer 1

由于antialiasing。

您正在绘制非整数坐标，而您无法渲染半个像素，因此像素颜色以一定的透明度着色，从而产生了比像素小的像素的幻觉。

但是，clearRect（）也要进行这种抗锯齿处理，因此会留下一些半透明的像素。

为避免这种情况，请尝试在可能的情况下始终绘制像素整数，并且清除整个画布并重新绘制每一帧所需的内容。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";

setInterval(function() {
  // clear all
  ctx.clearRect(0, 0, c.width, c.height);
  // redraw what needs to be
  let rect = {
    x: Math.random() * c.width,
    y: Math.random() * c.height
  }
  ctx.fillRect(rect.x, rect.y, 5, 5);
}, 500)

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

为什么clearRect（）无法完全清除fillRect（）

1 个答案: