添加动画后，画布变得像素化

Question

添加动画后，画布会像素化。我试图通过添加来解决这个问题，context.clearRect(0, 0, canvas.width, canvas.height);但它隐藏了以前的部分

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var x = canvas.width / 2;

var y = canvas.height / 2;

var radius = x - 40;

var endPercent = 45;

var curPerc = 0,

  mybeg;

var counterClockwise = false;

var circ = Math.PI * 2;

var quart = Math.PI / 2;

var col = ['#000', '#ff0000', '#002bff'];

function animate(current, colr, mybeg) {

  context.beginPath();

  context.moveTo(x, y);

  context.arc(x, y, radius, mybeg, ((circ) * current));

  context.fillStyle = colr;

  context.fill();

  //console.log(x, y, radius, mybeg, ((circ) * current));

  curPerc++;

  if (curPerc <= endPercent) {

    mybeg = 0;

    requestAnimationFrame(function() {

      animate(curPerc / 100, col[0], mybeg)

    });

  } else if (curPerc > 44 && curPerc <= 65) {

    const mybeg1 = ((circ) * 45 / 100);

    requestAnimationFrame(function() {

      animate(curPerc / 100, col[1], mybeg1)

    });

  } else if (curPerc > 64 && curPerc <= 100) {

    const mybeg2 = ((circ) * 65 / 100);

    requestAnimationFrame(function() {

      animate(curPerc / 100, col[2], mybeg2)

    });

  }

}

animate();

<canvas id="myCanvas" height="300" width="300"></canvas>

Answer 1

您多次在其自身上重新绘制相同的弧线。为了渲染平滑的弧线，我们需要半透明像素（抗锯齿），在其他半透明像素上绘制半透明像素将使它们更加不透明。所以这里的解决方案是清除所有内容并在每一帧重新绘制所有内容。有几种方法可以做到这一点，但最简单的方法之一可能是每次都渲染完整的馅饼，并仅使用合成在其上设置蒙版动画：var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');var x = canvas.width / 2;var y = canvas.height / 2;var radius = x - 40;var stops = [//[ begin, end , color ]&nbsp;&nbsp;&nbsp; [&nbsp; 0,&nbsp; 45, '#000' ],&nbsp; [ 45,&nbsp; 65, '#ff0000' ],&nbsp; [ 65, 100, '#002bff' ]];var current = 0;animate();function drawFullPie() {&nbsp; stops.forEach( function( stop , i) {&nbsp; &nbsp; var begin = (stop[0] / 100 ) * Math.PI * 2;&nbsp; &nbsp; var end&nbsp; &nbsp;= (stop[1] / 100 ) * Math.PI * 2;&nbsp; &nbsp; context.beginPath();&nbsp; &nbsp; context.moveTo( x, y );&nbsp; &nbsp; context.arc( x, y, radius, begin, end );&nbsp; &nbsp; context.fillStyle = stop[2];&nbsp; &nbsp; context.fill();&nbsp; } );}function drawMask() {&nbsp; var begin = 0;&nbsp; var end = (current / 100) * Math.PI * 2;&nbsp; // Keep whatever is currently painted to the canvas&nbsp; // only where our next drawings will appear&nbsp; context.globalCompositeOperation = 'destination-in';&nbsp; context.beginPath();&nbsp; context.moveTo( x, y );&nbsp; context.arc( x, y, radius, begin, end );&nbsp; context.fill();&nbsp; // disable masking&nbsp; context.globalCompositeOperation = 'source-over';}function animate() {&nbsp; // clear at every frame&nbsp; context.clearRect( 0, 0, canvas.width, canvas.height );&nbsp; // draw the full pie&nbsp; drawFullPie();&nbsp; // mask it as needed&nbsp; drawMask();&nbsp; // until complete&nbsp; if( current ++ < 100 ) {&nbsp; &nbsp; // do it again&nbsp; &nbsp; requestAnimationFrame( animate );&nbsp; }}<canvas id="myCanvas" height="300" width="300"></canvas>