html - 如何使我的图像在内部移动并在 HTML5 画布上更改图形？

Question

我是 HTML5 新手，需要一些帮助。我希望人物走到我在画布中单击的位置，我希望它像动画一样将图片“更改”为另一张步行图片，并且人物会走到坐标处。图像移动但根本不是平滑的，我想当我点击它时它会变成另一个图形并且它会平滑到我真的需要帮助来理解这一点的位置。这是我的代码

图图1 | 图 2

var canvas = document.getElementById("client");
var ctx = canvas.getContext("2d");
window.addEventListener('mousedown',onDown);

var width = 1200;
var height = 700;

var player = {
    x:50,
    y:100,
    spdx:10,
    spdy:2,
    width:1100,
    height:600,
    img:"images/gubbe1.png",
};

var mouse = {x:0, y:0};

function onDown(event) {
    mouse.x = event.pageX;
    mouse.y = event.pageY;
};

drawEntity = function(something) {
   var imageO = new Image;

   imageO.onload = function() {
       ctx.drawImage(imageO, mouse.x, mouse.y, 64, 150);
   }

   imageO.src = something.img;
}

function clearCanvas() {
    ctx.clearRect(0,0,width,height);
}

function moveimage() {
    clearCanvas();
    ctx.moveTo(mouse.x,mouse.y);
    drawEntity(player);
}

setInterval(moveimage, 100);

标签： htmlcanvashtml5-canvas