Question

我已经为招聘任务编写了代码-它必须是从左向右移动的矩形。当它到达右边界时，其大小应更改为100px，左边界为50px。每隔20px，它就会改变其颜色。如何确保此更改每20pxls执行一次？该代码实际上可以正常运行，但是我在互联网上找不到任何解决方案可以帮助我重复这种具体的代码动画。它是从左到右，然后再到左，然后reck像往左走一样躲起来。

{{1}}

Answer 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);

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

Answer 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);

画布JavaScript动画-rect从左向右运行以更改颜色-动画重复问题

2 个答案: