Question

我是HTML5的新手，需要一些帮助。我希望人物走到我在画布上单击的位置，我希望它像一个动画，它将图片“更改”为另一个步行图片，然后人物走到坐标。图像移动但完全没有平滑，我想单击鼠标按钮时将其更改为其他图形，并平滑移至该位置我真的需要帮助来了解这一点。这是我的代码

figure image 1 | figure image 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);

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

0 个答案: