Question

我正在尝试使用javascript和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

你说这个圆圈有粗糙的边缘＆＃34;。这种像素化是使用canvas绘制所固有的，这是一种位图式的图形。这意味着您基本上无法获得比单个像素更高的分辨率。与基于矢量的svg形成对比。 svg图像可以放大一千倍，并且仍然具有平滑的边缘。我在画布圈旁边显示了一个svg圆圈，以便您可以看到差异。如果您使用浏览器放大，则会变得更加明显。使用canvas vs svg有很多专业人士，并且很容易进入这里，但如果你真的担心的话，值得研究一下。

在改变圆圈的不透明度方面，您的方法存在一些问题。按照你编写的方式，你实际上并没有改变不透明度。相反，您在相同的顶部多次绘制相同的非常透明的圆圈，以便最终它看起来不透明，给人的印象是您逐渐增加单个圆圈的透明度。请注意，您在每次绘图迭代中将不透明度设置为零，然后将其增加到0.05 （请注意，您的问题中的代码与您链接到的代码集中存在差异...我＆＃ 39; m指代codepen版本），然后绘制它（所以它总是以不透明度0.05绘制），然后进一步改变从未在图形中使用的变量opacityValue的值。下面的示例显示了我认为您尝试实现的相对简单的示例。请注意，我故意制作了＆lt; clearRect＆＃39;太小，以至于你可以看到每次清理画布时如何都不允许半透明的图纸堆积起来＆＃34;。如果您覆盖许多半透明图像，这也可以让您看到阻塞变得更糟。例如比较画布圆的左侧和右侧。每次清除的圆圈部分由于抗锯齿而看起来更平滑，但叠加的图像具有抗锯齿的平滑效果，有效地被破坏。

＆＃13;

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();
  }
}

＆＃13;

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

＆＃13;

使用Canvas在弧上边缘

1 个答案: