画布javascript动画-从左到右运行的矩形改变颜色-动画重复问题答案

【问题标题】：Canvas javascript animation - rect running from left to right changing color - animation repeat problem画布javascript动画-从左到右运行的矩形改变颜色-动画重复问题
【发布时间】：2019-03-28 19:20:02
【问题描述】：

我已经为我的招聘任务编写了一个代码——它必须让我从左到右移动。当它到达右边界时，它应该将其大小更改为 100 像素，左边界为 50 像素。每 20px 后它就会改变它的颜色。如何确保此更改每 20pxls 进行一次？代码实际上运行正常，但我在互联网上找不到任何解决方案来帮助我重复这个具体的代码动画。它从左到右再到左，reck 像无限左一样隐藏起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CANVAS animacje</title>
    <style>
    
    body{
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
   
    </style>
</head>
<body>

   <canvas></canvas>
<script>

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 1000;
canvas.height = 500;

let cw = canvas.width;
let ch = canvas.height;

let canvasX = 0;
let canvasY = 0;

let rectX = 0;
let rectY = ch/2;

let rectSize = 50;
let rectSizeRight = 100;
let rectSpeed = 10;

function field(){
    ctx.fillStyle = '#ddd';
    ctx.fillRect(canvasX, canvasY, cw, ch);
    window.requestAnimationFrame(field);

}

function randomColors(){
        let r = Math.floor(Math.random()*255);
        let g = Math.floor(Math.random()*255);
        let b = Math.floor(Math.random()*255);
        return 'rgb('+r+','+g+','+b+')';
        window.requestAnimationFrame(randomColors);

    }


function rect(){

    ctx.fillStyle = randomColors()
    ctx.fillRect(rectX,rectY,rectSize,rectSize);
    
    rectX+=rectSpeed; 

    
    if(rectX+rectSize == 0){
        rectSize = rectSize;
        rectSpeed=rectSpeed;
    } else if(rectX+rectSizeRight == cw){
        rectSize=rectSizeRight;
        rectSpeed = -rectSpeed;
    } ;
    window.requestAnimationFrame(rect);

    
    // if(rectX+rectSizeRight == cw){
    //     rectSize=rectSizeRight;
    //     rectSpeed = -rectSpeed
    //   } 

    

    
    //   if (rectX+rectSize <= 0){
    //       rectSize = rectSize;
    //       rectSpeed = -rectSpeed;
    //   }
    //   if(rectX+rectSizeRight>=cw){
    //       rectSize=rectSizeRight;
    //       rectSpeed = -rectSpeed;
    //   }
     }


 function animate(){
field();
rect();
randomColors();
 }

 window.requestAnimationFrame(animate);


</script>

</body>
</html>

【问题讨论】：

标签： javascript html animation canvas

【解决方案1】：

长话短说：

删除对在屏幕上呈现内容的函数的冗余调用
存储最后选择的颜色以在画布背景之后引用它们覆盖矩形
仅当 x 坐标是 20 的倍数时才更改颜色（使用模运算符检查）
return 之后的代码不会被执行

这是更新后的代码：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 1000;
canvas.height = 500;

let cw = canvas.width;
let ch = canvas.height;

let canvasX = 0;
let canvasY = 0;

let rectX = 0;
let rectY = ch/2;

let rectSize = 50;
let rectSizeRight = 100;
let rectSpeed = 1;

// my change
let currentColors = randomColors();

function field(){

    ctx.fillStyle = '#ddd';
    ctx.fillRect(canvasX, canvasY, cw, ch);

    window.requestAnimationFrame(field);

}

function randomColors() {

        let r = Math.floor(Math.random()*255);
        let g = Math.floor(Math.random()*255);
        let b = Math.floor(Math.random()*255);

        return 'rgb('+r+','+g+','+b+')';

    }


function rect(){

    // my change
    if (rectX % 20 === 0) {
        currentColors = randomColors();
    }

    // my change
    ctx.fillStyle = currentColors;

    ctx.fillRect(rectX,rectY,rectSize,rectSize);

    rectX+=rectSpeed; 


    if(rectX+rectSize == 0){
        rectSize = rectSize;
        rectSpeed=rectSpeed;
    } else if(rectX+rectSizeRight == cw){
        rectSize=rectSizeRight;
        rectSpeed = -rectSpeed;
    } ;

    window.requestAnimationFrame(rect);


    // if(rectX+rectSizeRight == cw){
    //     rectSize=rectSizeRight;
    //     rectSpeed = -rectSpeed
    //   } 




    //   if (rectX+rectSize <= 0){
    //       rectSize = rectSize;
    //       rectSpeed = -rectSpeed;
    //   }
    //   if(rectX+rectSizeRight>=cw){
    //       rectSize=rectSizeRight;
    //       rectSpeed = -rectSpeed;
    //   }
     }


 function animate(){
    // my change
    field();
    rect();
 }

 window.requestAnimationFrame(animate);

除此之外，代码有点乱，但那是另一回事。

【讨论】：

非常感谢，这对我很有帮助，我现在明白了。

【解决方案2】：

试试这个

https://stackblitz.com/edit/typescript-kk42qx?embed=1&file=index.ts

// Import stylesheets
import './style.css';

// Write TypeScript code!
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `<h1>TypeScript Starter</h1>`;


const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 1000;
canvas.height = 500;

let cw = canvas.width;
let ch = canvas.height;

let canvasX = 0;
let canvasY = 0;

let rectX = 0;
let rectY = ch/2;

let rectSize = 50;
let rectSizeRight = 100;
let rectSpeed = 10;

function field(){
  ctx.fillStyle = '#ddd';
  ctx.fillRect(canvasX, canvasY, cw, ch);
  window.requestAnimationFrame(field);
}

function randomColors(){
  let r = Math.floor(Math.random()*255);
  let g = Math.floor(Math.random()*255);
  let b = Math.floor(Math.random()*255);
  return 'rgb('+r+','+g+','+b+')';
  window.requestAnimationFrame(randomColors);
}

let a = 0; <==== Initialize a variable outside the loop

function rect(){

  a++; <=== 

  ctx.fillStyle = randomColors()
  ctx.fillRect(rectX,rectY,rectSize,rectSize);

  // ==========================
  if (a % 50 === 0) {
    rectX = a;
  }
  // ==========================


  if(rectX + rectSize == 0){
    rectSize = rectSize;
    rectSpeed = rectSpeed;
  } else if(rectX + rectSizeRight === cw){
    rectSize = rectSizeRight;
    rectSpeed = -rectSpeed;
  } else if (1) {

  }

  window.requestAnimationFrame(rect);

  // console.log(rectX)

}



function animate(){
  field();
  rect();
  randomColors();
}

window.requestAnimationFrame(animate);

【讨论】：