在 HTML5 画布上平滑移动图像

Question

我正在画布中移动插入的图像。

HTML

 <div id="left">move left</div>

jQuery:

let MoveLeft=0;
$("#left").on("click", function(){
    MoveLeft+=10;
});

在画布函数中

function(){
    .....
    var LeftPos=100; //default
    If(MoveLeft!=0)
        LeftPos=LeftPos + MoveLeft;
}
ctx.drawImage(img,0,0,imgW,imgH,LeftPos,0,imgW,imgH);

这行得通，但移动发生在一次跳跃中。如何顺利翻译图像？像动画一样？

let GlassesUp = 0;
$('.MoveGlasses').on("click", function(event) {
  if ($(this).hasClass("MoveGlassesUp")) {

    GlassesUp += 10;

  }
  drawMe();
});

var canvas = document.getElementById('cv');
ctx = canvas.getContext('2d');

// core drawing function
var drawMe = function() {
  var ImgGlasses = document.getElementById('glasses');
  canvas.width = 400;
  canvas.height = 400;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  var GUp = 50;

  if (GlassesUp != 0) {

    GUp = GUp - GlassesUp;
    //alert(GUp)
  }

  ctx.drawImage(ImgGlasses, 0, 0, 250, 250, 50, GUp, 250, 250);
}

drawMe();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="MoveGlasses MoveGlassesUp">Up</div>
<canvas id="cv"></canvas>
<img src="https://image.flaticon.com/icons/svg/126/126514.svg" style="height:60px;width:100px;opacity:0" id="glasses" />

Answer 1

draw 函数每 100 毫秒将图像置换 0.7 次。您可以调整这两个参数。

let GlassesUp = 0;
var t;
$('.MoveGlassesUp').on("click", function(event) {
clearInterval(t)
  t = setInterval(function() {
    GlassesUp += 0.7;
    drawMe();
  }, 100);
  setTimeout("clearInterval(t)", 1000)
});

$('.MoveGlassesDown').on("click", function(event) {
clearInterval(t)
  t = setInterval(function() {
    GlassesUp -= 0.7;
    drawMe();
  }, 100);
  setTimeout("clearInterval(t)", 1000)
});



var canvas = document.getElementById('cv');
ctx = canvas.getContext('2d');

// core drawing function
var drawMe = function() {
  var ImgGlasses = document.getElementById('glasses');
  canvas.width = 400;
  canvas.height = 400;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  var GUp = 50;


  if (GlassesUp != 0) {

    GUp = GUp - GlassesUp;
    //alert(GUp)
  }

  ctx.drawImage(ImgGlasses, 0, 0, 250, 250, 50, GUp, 250, 250);






}


drawMe();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<button class="MoveGlasses MoveGlassesUp">up</button>
<button class="MoveGlasses MoveGlassesDown">down</button>
<hr/>
<canvas id="cv"></canvas>

<img src="https://image.flaticon.com/icons/svg/126/126514.svg" style="height:60px;width:100px;opacity:0" id="glasses" />