javascript - 圆弧上的边缘，使用 Canvas

Question

我正在尝试使用 javascript 和 canvas 元素进行绘图。我现在的目标是画一个圆圈并逐渐增加不透明度；我有这个代码:

http://codepen.io/anon/pen/zrVvOQ

这似乎有效，但圆的边缘很粗糙；我发现每次重新绘制框架时都需要清除 Canvas ，但我所做的尝试并没有完全奏效...有关如何操作的任何建议？

window.onload = function draw(){
       var frame1 = document.getElementById('frame1');
       if (frame1.getContext){
         var ctx = frame1.getContext('2d');
         var centerX = frame1.width / 2;
         var centerY = frame1.height / 2;

         var radius = 50;


         var alpha = 1.0;

           /*call function over and over */
  var requestAnimationFrame = window.requestAnimationFrame ||
                   window.mozRequestAnimationFrame ||
                   window.webkitRequestAnimationFrame ||
                   window.msRequestAnimationFrame;


           var rendergreen = function()
{

              var opacityValue = 0;

                opacityValue += 0.03;
                ctx.fillStyle = 'rgba(68,107,62, ' + opacityValue + ')';
                animate();
              ctx.arc(50, centerY, radius, 0, 2 * Math.PI, false);
              ctx.clip();
              ctx.fill();

              ctx.closePath;


              function animate() {


                if (opacityValue < 1) {
                         opacityValue += 0.3;


                } else {
                     opacityValue = 1;


                }


}

            requestAnimationFrame(rendergreen);


       }
           rendergreen();


       }
}

Answer 1

你说圆有“粗糙的边缘”。这就是像素化，是使用 Canvas 进行绘图所固有的，这是一种位图样式的图形。这意味着您基本上无法获得比单个像素更高的分辨率。与基于矢量的 svg 进行对比。 svg 图像可以放大一千倍并且仍然具有平滑的边缘。我在 Canvas 圆旁边显示了一个 svg 圆，以便您可以看到差异。如果您使用浏览器放大，它会变得更加明显。使用 canvas 与 svg 各有利弊，这里无法一一详述，但如果您真的担心的话，值得研究一下。

在更改圆圈的不透明度方面，您的方法存在一些问题。按照您编写的方式，您实际上并没有改变不透明度。相反，您会在彼此之上多次绘制相同的非常透明的圆圈，因此到最后它看起来不透明，给人的印象是您正在逐渐增加单个圆圈的透明度。请注意，您在每次绘图迭代中将不透明度设置为零，然后将其增加到 0.05 (请注意，您的问题中的代码与您链接到的代码笔中的代码存在差异......我指的是到 codepen 版本)，然后绘制它(因此它将始终以不透明度 0.05 绘制)，然后进一步更改绘图中从未使用的变量 opacityValue 的值。下面的示例显示了一个相对简单的示例，我认为您想要实现的目标。请注意，我故意将“clearRect”设置得太小，以便您可以看到每次不清除 Canvas 如何导致半透明绘图“堆积”。这还可以让您看到，如果叠加许多半透明图像， block 效应会变得更糟。例如比较 Canvas 圆的左侧和右侧。每次被清除的圆的部分由于抗锯齿而看起来更加平滑，但叠加的图像抗锯齿的平滑效果被有效破坏。

window.onload = function draw() {
  var frame1 = document.getElementById('frame1');
  if (frame1.getContext) {
    var ctx = frame1.getContext('2d');
    var opacityValue = 0;
    var render = function() {
      ctx.clearRect(0, 0, 80, 80); // deliberately set too small
      ctx.beginPath();
      opacityValue += 0.01;
      ctx.fillStyle = 'rgba(68,107,62, ' + opacityValue + ')';
      ctx.arc(60, 60, 50, 0, 2 * Math.PI, false);
      ctx.fill();
      ctx.closePath;
      requestAnimationFrame(render);
    }
    render();
  }
}

<canvas id="frame1" width="120" height="120"></canvas>
<svg width="120" height="120">
  <circle cx="60" cy="60" r="50" fill="#446B3E"></circle>
</svg>