Fatal编程技术网
  • javascript/
  • Javascript 如何使图像在画布中移动？

Javascript 如何使图像在画布中移动？

javascript html5-canvas

Javascript 如何使图像在画布中移动？,javascript,html5-canvas,Javascript,Html5 Canvas,我试图使图像移动，但我不断收到value的错误，说它没有定义。我不确定我是否做对了，有人能让这件事正常工作吗 window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||

我试图使图像移动，但我不断收到
value
的错误，说它没有定义。我不确定我是否做对了，有人能让这件事正常工作吗

window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame ||
           window.webkitRequestAnimationFrame || 
           window.mozRequestAnimationFrame || 
           window.oRequestAnimationFrame || 
           window.msRequestAnimationFrame ||
           function(callback) {
               window.setTimeout(callback, 1000 / 60);
           };
    })();

    var blueCar = new Image();
    var redCar = new Image();

    // images
    function image(){
        blueCar.src = "http://worldartsme.com/images/car-top-view-clipart-1.jpg";
        redCar.src = "http://images.clipartpanda.com/car-clipart-top-view-free-vector-red-racing-car-top-view_099252_Red_racing_car_top_view.png";

    }

    window.onload = function draw(){
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.globalCompositeOperation = 'destination-over';
        window.requestAnimationFrame(draw);

        // finish line
        ctx.beginPath();
        ctx.moveTo(1020, 150);
        ctx.lineTo(1020, 0);
        ctx.strokeStyle = "#FFEF0E";
        ctx.stroke();

        //blue car
        ctx.save();
        if (blueCar.complete) {
            ctx.drawImage(blueCar, 10, 10, 100, 60);
        }

        // red car
        if (redCar.complete) {
            ctx.drawImage(redCar, 10, 80, 100, 60);
        }
    }

    //animate on click
    document.getElementById('canvas').addEventListener('click', function animate(lastTime, redCar, blueCar, runAnimation, canvas, ctx) {
        if (runAnimation.value) {
            // update
            var time = (new Date()).getTime();
            var timeDiff = time - lastTime;

            var redSpeed = Math.floor((Math.random() * 400) + 1);
            var blueSpeed = Math.floor((Math.random() * 400) + 1);
            var linearDistEachFrameRed = redSpeed * timeDiff / 1000;
            var linearDistEachFrameBlue = blueSpeed * timeDiff / 1000;
            var currentX = redCar.x;
            var currentZ = blueCar.x;

            if (currentX < canvas.width - redCar.width - redCar.borderWidth / 2) {
                var newX = currentX + linearDistEachFrameRed;
                redCar.x = newX;
            }

            if (currentZ < canvas.width - blueCar.width - blueCar.borderWidth / 2) {
                var newZ = currentZ + linearDistEachFrameBlue;
                blueCar.x = newZ;
            }

            //clear
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            image();

            requestAnimFrame(function() {
                animate(time, redCar, blueCar, runAnimation, canvas, ctx);
            });
        }

        var runAnimation = {
            value: false
        };
    });
    image();

window.requestAnimFrame=（函数（回调）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame | |
window.mozRequestAnimationFrame | |
window.oRequestAnimationFrame | |
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
var blueCar=新图像（）；
var redCar=新图像（）；
//图像
函数映像（）{
blueCar.src=”http://worldartsme.com/images/car-top-view-clipart-1.jpg";
redCar.src=”http://images.clipartpanda.com/car-clipart-top-view-free-vector-red-racing-car-top-view_099252_Red_racing_car_top_view.png";
}
window.onload=函数draw（）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.globalCompositeOperation='destination over'；
window.requestAnimationFrame（绘制）；
//终点线
ctx.beginPath（）；
ctx.moveTo（1020150）；
ctx.lineTo（1020,0）；
ctx.strokeStyle=“#FFEF0E”；
ctx.stroke（）；
//蓝色汽车
ctx.save（）；
如果（blueCar.complete）{
ctx.drawImage（blueCar，10,10,100,60）；
}
//红色汽车
如果（红色汽车，完成）{
ctx.drawImage（redCar，10,80,100,60）；
}
}
//单击时设置动画
document.getElementById（'canvas'）。addEventListener（'click'，函数动画（lastTime、redCar、blueCar、runAnimation、canvas、ctx）{
if（runAnimation.value）{
//更新
var time=（新日期（））.getTime（）；
var timeDiff=时间-上次时间；
var redSpeed=Math.floor（（Math.random（）*400）+1）；
var blueSpeed=Math.floor（（Math.random（）*400）+1）；
var LINEARDISEACHFRAMERED=redSpeed*timeDiff/1000；
var linearDistEachFrameBlue=蓝速*timeDiff/1000；
var currentX=redCar.x；
var currentZ=blueCar.x；
如果（当前x
我想把这个作为如何在画布上为汽车制作动画的一个例子。我从上面的例子中拿了一辆蓝色的车，简单地把它移动成一个椭圆形，没有任何旋转。您可以通过和方法轻松实现汽车的旋转

您可以看到，我正在首先加载图像资源，并且仅在资源加载后才开始动画。然后，调用循环，该循环调用draw和update，向它们传递刻度和差值，以便在这些方法中进行平滑的运动计算

<!DOCTYPE html>
<html>
    <head>
        <title>Image Animation Test</title>
        <meta charset="UTF-8">
        <script>
            const BLUE_URL = "http://worldartsme.com/images/car-top-view-clipart-1.jpg";
            const DESIRED_ROTATION_SPEED = Math.PI / 2;

            var raf;
            var blueCar;
            var ctx;
            var lastTick = 0;
            var position = { x:0, y:0, angle:0 };
            var center = { x:0, y:0 };

            function getRaf() {
                return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame || 
                    window.mozRequestAnimationFrame || 
                    window.oRequestAnimationFrame || 
                    window.msRequestAnimationFrame ||
                    function(callback) {
                        window.setTimeout(callback, 1000 / 60);
                    };
            }

            function clearContext(fillColor) {
                ctx.fillStyle = fillColor;
                ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            }

            function update(gameTime) {
                position.angle += (gameTime.diff / 1000) * DESIRED_ROTATION_SPEED;
                if (position.angle > (Math.PI * 2)) {
                    position.angle -= Math.PI * 2;
                }

                position.x = center.x + (Math.cos(position.angle) * 180);
                position.y = center.y + (Math.sin(position.angle) * 140);
            }

            function draw(gameTime) {
                clearContext('#101010');
                var drawHeight = 100;
                var drawWidth = drawHeight * blueCar.width / blueCar.height;
                ctx.drawImage(blueCar, 0, 0, blueCar.width, blueCar.height, position.x - (drawWidth / 2), position.y - (drawHeight / 2), drawWidth, drawHeight);
            }

            function loop(tick) {
                var diff = tick - lastTick;
                lastTick = tick;
                var gameTime = { tick:tick, lastTick:lastTick, diff:diff };
                update(gameTime);
                draw(gameTime);
                raf(loop);
            }

            function init(event) {
                console.log(BLUE_URL);
                var canvas = document.getElementById('canvas');
                canvas.width = 800;
                canvas.height = 600;
                center.x = canvas.width / 2;
                center.y = canvas.height / 2;
                position.x = center.x;
                position.y = center.y;
                ctx = canvas.getContext('2d');
                raf = getRaf();
                blueCar = new Image();
                blueCar.addEventListener('load', function(event) {
                    startAnimation();
                }, false);
                blueCar.src = BLUE_URL;
            }

            function startAnimation() {
                raf(loop);
            }

            window.addEventListener('load', init, false);
        </script>
    </head>
    <body>
        <canvas id="canvas"><h1>Canvas not supported</h1></canvas>
    </body>
</html>


图像动画测试
const BLUE_URL=”http://worldartsme.com/images/car-top-view-clipart-1.jpg";
所需的恒定旋转速度=Math.PI/2；
var-raf；
蓝车；
var-ctx；
var lastTick=0；
变量位置={x:0，y:0，角度：0}；
变量中心={x:0，y:0}；
函数getRaf（）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame | |
window.mozRequestAnimationFrame | |
window.oRequestAnimationFrame | |
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
}
函数clearContext（fillColor）{
ctx.fillStyle=fillColor；
ctx.fillRect（0，0，ctx.canvas.width，ctx.canvas.height）；
}
功能更新（游戏时间）{
position.angle+=（gameTime.diff/1000）*所需旋转速度；
如果（position.angle>（Math.PI*2））{
position.angle-=Math.PI*2；
}
位置x=中心x+（数学cos（位置角度）*180）；
位置y=中心y+（数学sin（位置角度）*140）；
}
函数绘制（游戏时间）{
clearContext（“#101010”）；
高度=100；
var drawWidth=drawHeight*blueCar.width/blueCar.height；
ctx.drawImage（blueCar，0，0，blueCar.width，blueCar.height，position.x-（drawWidth/2），position.y-（drawHeight/2），drawWidth，drawHeight）；
}
函数循环（勾选）{
var diff=勾号-最后勾号；
lastTick=滴答声；
var gameTime={tick:tick，lastTick:lastTick，diff:diff}；
更新（游戏时间）；
抽签（游戏时间）；
raf（loop）；
}
函数初始化（事件）{
console.log（蓝色的URL）；
var canvas=document.getElementById（'canvas'）；
画布宽度=800；
帆布高度=600；
中心.x=canvas.width/2；
中心y=画布高度/2；
位置x=中心x；
位置