Canvas 中的 Context.clearRect 不起作用答案

【问题标题】：Context.clearRect in Canvas doesn't workCanvas 中的 Context.clearRect 不起作用
【发布时间】：2018-09-03 14:50:19
【问题描述】：

如果我得到一张图片并想将其绘制到右侧，它可以工作。但是当我添加clearRect() 时，图片消失了。如何通过正确的方法使用类似的代码，以便 clearRect() 可以工作？

这是我的代码：

<html>
<head>
<style>
#canvas_id{
border:1px solid red;
 }
 </style>
 </head>
<body>

<canvas id="canvas_id"></canvas>
<script>
var canvas = document.getElementById( "canvas_id" );
var Context = canvas.getContext( "2d" );
var x1 = 10;
var x2 = 10;

var img = new Image();
img.src = "example.jpg";
img.onload = function(){ Context.drawImage( img, x1, x2,20,20); }

draw();

function draw(){
  window.requestAnimationFrame(draw);

 Context.clearRect(0,0,innerWidth,innerHeight);

 var Img = new Image();
 Img.src = "example.jpg";
 Img.onload = function(){ Context.drawImage( Img, x1, x2,20,20); }


 x1 = x1 +1;


}
</script>
</body>

如果我用fillRect() 代替图像，则代码可以工作。

【问题讨论】：

为什么要添加clearRect()？你想达到什么目的？
图像每次都会在一个位置重新创建，如果我不使用 clearRect() 之类的东西，旧位置不会清除，所以动画看起来很糟糕：/我只是想用画布将图像向右转换。
因为我稍后需要画布来处理其他一些不重要的事情:-)

标签： javascript html canvas html5-canvas drawimage

【解决方案1】：

只加载一次图像。

加载图像始终是异步的，即使在缓存时也是如此。
requestAnimationFrame 回调将在在下一次绘制屏幕之前调用。

这是您的代码中发生的情况的示意图：

clearRect start_to_load_Img || ... img.loaded=>drawImage ... clearRect start_to_load_Img || etc.
                            ^                                                            ^
               render new frame to screen                                    render new frame to screen

如您所见，每次在两帧之间加载图像时。但就在下一帧被传递到屏幕之前，你会清除它。

所以一个固定的代码看起来像

// load your image only once
var img = new Image();
img.src = "example.jpg";

draw();

function draw(){
  window.requestAnimationFrame(draw);

  Context.clearRect(0,0,innerWidth,innerHeight);
  if(img.naturalWidth) { // check it has loaded
    Context.drawImage(img, x1, x2,20,20);
  }
 ...

【讨论】：