如何在javascript中向后移动画布？

Posted 2023-05-08

【中文标题】如何在javascript中向后移动画布？

【英文标题】：How to move the canvas backward in javascript?

【发布时间】：2021-11-11 08:18:46

【问题描述】：

我试着想盒子在达到 1000px (canvas.width) 时如何向后移动，但我不知道它在 if 条件后如何解决，所以有我的脚本，任何人都可以帮助我吗？

var canvas = document.querySelector("canvas");
var canvasCT = canvas.getContext("2d");
var x = 50;

function draw() 
    canvas.width = canvas.width;
    canvasCT.fillStyle = "blue";
    canvasCT.fillRect(x, 50, 100, 100);


function run() 
    draw();
    x += 5 ;
    if (x > 1000) 
    ......
    

setInterval(run, 10);

【问题讨论】：

一旦超过 1000，您需要开始从 x 每个循环中减去 5 而不是添加它。

【参考方案1】：

var canvas = document.querySelector("canvas");
var canvasCT = canvas.getContext("2d");
var x = 50;
var speed = 5;

function draw() 
    canvas.width = canvas.width;
    canvasCT.fillStyle = "blue";
    canvasCT.fillRect(x, 50, 100, 100);


function run() 
    draw();
    x += speed;
    if (x > 1000 || x < 0) 
      speed = -speed;
    

setInterval(run, 10);

<canvas width=1000></canvas>