javascript - Canvas 在动画之间闪烁

Question

我在学校有一项实践练习，但我对 html/js 非常菜鸟。我的问题是我的 Canvas 在闪烁，就像删除一张图像并放置其他图像一样，但速度非常快。我想要同时显示 2 张图像。这是代码:

var CanvasXSize = 800;
var CanvasYSize = 200;
var speed = 10; // lower is faster
var scale = 1;
var y = -4.5; // vertical offset

// Main program

var dx = 0.75;
var imgW;
var imgH;
var x = 0;
var clearX;
var clearY;
var ctx;
var imgFunct;
var i = 0;

    function onload() {
      canvas = document.getElementById('canvas');
      ctx = canvas.getContext("2d");
      img = new Image();
	  img2 = new Image();
	  img.src = 'https://sapires.000webhostapp.com/assets/simba.png';
      img.onload = loaded();
	  img2.onload = loaded();
    }
    function loaded() {
        imageReady = true;
        setTimeout( update, 1000 / 60 );
    }

    function redraw() {
        ctx.fillStyle = '#000000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        if (imageReady) {
            ctx.drawImage(img, frame*96, 0, 96, 54,
                          canvas.width - i, canvas.height/2 + 100, 96, 54);
						  i += 8;
        }
    }
    
    var frame = 0;
    var lastUpdateTime = 0;
    var acDelta = 0;
    var msPerFrame = 100;
    
    function update() {
        requestAnimationFrame(update);
    
        var delta = Date.now() - lastUpdateTime;
        if (acDelta > msPerFrame)
        {
            acDelta = 0;
            redraw();
            frame++;
            if (frame >= 6) frame = 0;
        } else
        {
            acDelta += delta;
        }
    
        lastUpdateTime = Date.now();
    }
	
  function add() { //Imagem de fundo
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();
    var img4 = new Image();
    img1.src = 'https://sapires.000webhostapp.com/assets/Primavera.jpg';
    img2.src = 'https://sapires.000webhostapp.com/assets/Verao.jpg';
    img3.src = 'https://sapires.000webhostapp.com/assets/Outono.jpg';
    img4.src = 'https://sapires.000webhostapp.com/assets/Inverno.jpg';
    var a = document.getElementById('estacao').value;
    var b = document.getElementById('cor').value;
    var trainColor = document.getElementById('canvas');

    if(b==5){
        trainColor.style.border="20px solid red";
    }else{
    if(b==6){
        trainColor.style.border="20px solid blue";
    }else{
        trainColor.style.border="20px solid green";
    }}
    
    if(a==1){
            carregaImg(img1);
    }else{
    if(a==2){
            carregaImg(img2);
    }else{
    if(a==3){
            carregaImg(img3);
    }else{
            carregaImg(img4);
    }}}}

function carregaImg(imgFunct){
	
imgFunct.onload = function() {

    imgW = imgFunct.width * scale;
    imgH = imgFunct.height * scale;
    
    if (imgW > CanvasXSize) {
        // image larger than canvas
        x = CanvasXSize - imgW;
    }
    if (imgW > CanvasXSize) {
        // image width larger than canvas
        clearX = imgW;
    } else {
        clearX = CanvasXSize;
    }
    if (imgH > CanvasYSize) {
        // image height larger than canvas
        clearY = imgH;
    } else {
        clearY = CanvasYSize;
    }
    
    // get canvas context
    ctx = document.getElementById('canvas').getContext('2d');
	
	ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
 
    // set refresh rate
	return setInterval(draw, speed);
}

function draw() {
	onload();

    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
    
    // if image is <= Canvas Size
    if (imgW <= CanvasXSize) {
        // reset, start from beginning
        if (x > CanvasXSize) {
            x = -imgW + x;
        }
        // draw additional image1
        if (x > 0) {
            ctx.drawImage(imgFunct, -imgW + x, y, imgW, imgH);
        }
        // draw additional image2
        if (x - imgW > 0) {
            ctx.drawImage(imgFunct, -imgW * 2 + x, y, imgW, imgH);
        }
    }

    // image is > Canvas Size
    else {
        // reset, start from beginning
        if (x > (CanvasXSize)) {
            x = CanvasXSize - imgW;
        }
        // draw aditional image
        if (x > (CanvasXSize-imgW)) {
            ctx.drawImage(imgFunct, x - imgW + 1, y, imgW, imgH);
        }
    }
    // draw image
    ctx.drawImage(imgFunct, x, y,imgW, imgH);
    // amount to move
    x += dx;
}
}
console.log(x);

/* Some HTML5 Tags
 */

aside, footer, header, nav, section {
  display: block;
}


body {
  background-color: #bbb;
  color: #383838;
}

#canvas {
  background-color: #fff;
}

header {
  padding-bottom: 10px;
}

header a {
  color: #30f;
  text-decoration: none;
}

aside {
  padding-top: 6px;
}
div {
    border-style: groove;
    border-color: coral;
    border-width: 7px;
}

/* Index page
 */

#index-body {
  background-color: #fdeba1;
  font-family: "Vollkorn", serif;
  color: #000;
}

#index-body a {
  text-decoration: none;
  color: #b30300;
}

#index-body #description, #index-body #exercises {
  overflow: auto;
  max-width: 900px;
  margin: 0px auto 20px auto;
  padding-left: 15px;
  padding-bottom: 15px;
  background-color: #fff;
  border-radius: 15px;
}

#index-body #description {
  margin-top: 40px;
}

#index-body h1 {
  color: #b30300;
}

#index-body #description h2 {
  margin-bottom: 0;
}

#index-body h1 a {
  text-decoration: underline;
  color: #b30300;
}

#index-body li h2, #index-body li h3, #index-body li h4 {
  color: #000;
}

#index-body li h3 {
  margin-bottom: 0px;
}

#index-body #description ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#index-body #description ul li {
 padding-bottom: 0.6em;
}
.container {
  display: table;
  width: 100%;
  height: auto;
}
.container .text {
    display:table-cell;
    height:100%;
    vertical-align:middle;
}
.container img {
  padding: 0 20px;
  display: block;
  float: right;
}
.container .clear {
  clear: both;
}

#exercises ul {
  margin: 0;
  padding: 4px 20px 10px 20px;
}

#exercises ol {
  margin: 0 20px 10px 0;
  padding: 0;
  list-style-type: none;
}

#exercises ol li {
  padding-top: 5px;
}

#exercises ol ol ol {
  padding-left: 60px;
  list-style-type: decimal-leading-zero;
}

#exercises ol ol ol li img, #exercises ol ol li img {
  margin-left: 4px;
  margin-bottom: -10;
}

#exercises h2 {
  margin: 10px 0 0 0;
}

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Trabalho9831</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./Trabalho9831.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
	
  </head>
  <body>

    <canvas id="canvas" width="800" height="330" style="border-style: outset;border-color: red; border-width: 20px;">

      <p>Your browser does not support the <code>canvas</code> element.</p>
    </canvas>
    <aside> ESTAÇAO        - COR DO COMBOIO</aside>

<select id="estacao" class="dropdown-content">
<option value="1">Primavera</option>
<option value="2">Verao</option>
<option value="3">Outono</option>
<option value="4">Inverno</option>
</option>

</select>
<select id="cor" class="dropdown-content">
<option value="5">Vermelho</option>
<option value="6">Azul</option>
<option value="7">Verde</option>
</select>
<button onclick="add()">Start</button>

</body>
</html>

我想我需要将第二张图像放在第一张图像中，但我不知道该做什么。 这是一个错误还是糟糕的编程？

Answer 1

这是因为你清空了canvas然后setInterval来绘制它。当您想要开始绘图时，请清除矩形。您已经在 draw() 函数中清除了矩形，因此只需在 return setInterval...

之前删除该行即可