Question

我开始制作一款小巧轻松的比赛游戏。它只包括一辆汽车，一条道路和一辆必须被驾驶汽车抓住的油箱，这样它就不会耗尽燃油。

道路从画布底部开始，宽度为600px宽，顶部宽度为10px。我希望当汽车图像到达顶部时使汽车图像更小，当玩家按下时汽车再次接近底部时更大。

这对js来说甚至可能吗？我刚刚读到这个：http://www.webmonkey.com/2010/02/make_images_grow_and_shrink_with_javascript/

但是在那个链接中，他们讨论的是图像在一个元素中，这不是我的情况。

Answer 1

你好Mieer是的，你可以毫无问题地做到这一点。

基本上使用canvas.drawImage函数，它可以包含5个参数。

drawImage(imageSrc, xPosition, yPosition, imageWidth, imageHeight);

所以你需要做的就是让玩家使用yPosition并使用它来改变图像高度。

这是一个简单的jsFiddle，显示了drawImage 5 paremters

jsFiddle：https://jsfiddle.net/oc0cdd2c/

HTML

<canvas id="myCanvas" width="600" height="200"></canvas>

的Javascript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var canvasHeight = 200;

var image = new Image();
image.src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTghB-IW500LgTFAq6JPuwTUJ4mLuOsVawUkbXNLa4uCB9N_wKf";

var draw = new function()
{
    //100% height
    context.drawImage(image,10,150);

    //10% height
    context.drawImage(image,10,10, image.width, (image.height / 100 * 50));
}

draw();

希望这可以帮助你。

当它在Canvas中移动时逐渐收缩/生长图像

1 个答案: