Question

1）。这个动画有一个奇怪的效果，它使屏幕的一部分颜色比它应该更暗（它应该更透明而不是不透明），还

2）。它以错误的方式调整屏幕大小，使其变得比应有的小。

以下是代码：

const canvas = document.getElementById('c');
const context = canvas.getContext('2d');
var shiftingValue = 0.1;
var wavePos = 0;

function flowGrad() {

   //Clearing between frames
    context.clearRect(0, 0, canvas.height, canvas.width);

  //Creating linear gradient
    var lineargradient = context.createLinearGradient(canvas.width/2, 0, canvas.width/2, canvas.height);
    lineargradient.addColorStop(0, 'rgba(255,0,0,.2)');
    lineargradient.addColorStop(wavePos, 'rgba(0,255,0,.5)');
    lineargradient.addColorStop(1, 'rgba(0,0,255,.2)');

    context.fillStyle = lineargradient;


    //Drawing triangle
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(canvas.width, 0);
    context.lineTo(canvas.width/2, canvas.height);
    context.fill();

    shiftingValue += 0.01;
    //Uses absolute value of sin to generate an oscilating value.
    wavePos = Math.abs(Math.sin(shiftingValue));
    requestAnimationFrame(flowGrad);
}

function init() {
    // Register an event listener to call the resizeCanvas() function 
    // each time the window is resized.
    window.addEventListener('resize', resizeCanvas, false);
    // Draw canvas for the first time.
    requestAnimationFrame(flowGrad);
}

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

init();

和codepen链接。非常感谢。如果想要效果不适合我，我会使用Chrome。

Answer 1

1）。这个动画有一个奇怪的效果，它使屏幕的一部分颜色比它应该更暗（它应该更透明而不是不透明）

你换了高度和宽度;改变这一行：

context.clearRect(0, 0, canvas.height, canvas.width);

到

context.clearRect(0, 0, canvas.width, canvas.height);

2）。它以错误的方式调整屏幕大小，使其变得比应有的小。

在resize处理程序中异步调用动画循环几次。在全局范围内添加动画帧请求的引用，然后在每次调整大小时取消请求：

var ref;

// ...
function init() {
  window.addEventListener('resize', resizeCanvas, false);
  cancelAnimationFrame(ref);  // cancel current, if any
  ref = requestAnimationFrame(flowGrad);
}

以及循环本身：

function flowGrad() {
  // ...
  ref = requestAnimationFrame(flowGrad);
}

除此之外，您总是可以添加CSS规则以避免画布被偏移，从而产生滚动条：

html, body {
  margin: 0;
  overflow: hidden;
  }

还要记住通过手动调用init()来第一次在resizeCanvas()内设置画布大小。

使用＆＃39; lineargradient＆＃39;的画布动画一边颜色较深而且没有正确调整大小？

1 个答案: