Анимация изображений в HTML5 и на холсте

Мне нужна помощь в создании изображения с плавающей точкой на холсте в HTML5 и JavaScript. Я гулял и ничего не нашел. Я могу рисовать фигуры на экране, но я не знаю, как их оживить. Я хочу, чтобы пара разных изображений плавала на холсте со всех сторон. Может кто-нибудь, пожалуйста, помогите мне с этим? через 4 часа все прибегая к помощи я мог сделать этоАнимация изображений в HTML5 и на холсте

<script type = "Text/JavaScript"> 
       function Animate(){ 
       var canvas=document.getElementById("myCanvas"); 
       var ctx=canvas.getContext("2d"); 

       var img = new Image(); 

       img.onload = function() 
       { 
        ctx.drawImage(img,20,20,300,300); 

       }; 
       img.src = "vb.png"; 
       } 
      </script> 
    </head> 
<body> 
<canvas id="myCanvas" height="200" width="800"></canvas> 
<br><button onclick="Animate();">Restart</button>

Там, кажется, много учебников по анимации формы, но я хочу, чтобы загрузить свои собственные фотографии и иметь их летать на холст.

источник

2012-03-20 user1281566

Посмотрите на [MDN о Трансформации] (https://developer.mozilla.org/en/Canvas_tutorial/Transformations). У него есть все, что вам нужно. –

Попробуйте очень основной демо холст анимации:

http://jsfiddle.net/bDQ6b/2/

window.addEventListener('load', function() { 
    var 
    img = new Image, 
    ctx = document.getElementById('myCanvas').getContext('2d'); 

    img.src = 'http://www.gravatar.com/avatar/a1f80339c0cef95be6dc73e0ac510d5d?s=32&d=identicon&r=PG'; 
    img.addEventListener('load', function() { 

    var interval = setInterval(function() { 
     var x = 0, y = 0; 

     return function() { 
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
     ctx.drawImage(img, x, y); 

     x += 1; 
     if (x > ctx.canvas.width) { 
      x = 0; 
     } 
     }; 
    }(), 1000/40); 
    }, false); 
}, false);

Существует много, которые можно было бы сделать лучше, хотя. Например:

использование requestAnimationFrame вместо интервала
предварительного загрузки изображений в более удобном способе
с использованием скорости и разницы во время (от последнего к текущему кадру) вместо фиксированного шага
и многие другие

но, поскольку все это сделало бы этот пример слишком сложным, я оставлю его таким, как есть, и надеюсь, что вы прочитаете эти темы во время обучения.

источник

2012-03-20 17:46:23 Yoshi

Для анимации с холстом вам необходимо записать местоположение вашего объекта, а затем увеличить его на новый кадр. setInterval(draw, 1000/25); позволяет запускать функцию по истечении заданного интервала времени. Вы можете использовать эту функцию для обновления позиции вашего объекта на странице при каждом рендеринге нового фрейма.

Например:

function draw() { playersShip.move(); }

Где приращение перемещения функции или вычитает й и/или у координаты объекта. Эта строка рисует указанное изображение с указанной координатой (которая обновляется при визуализации каждого кадра).

ctx.drawImage(shipImage, playersShip.position.x, playersShip.position.y);

Было бы хорошая идея, чтобы изолировать движение ваших объектов от вашего фреймрейт, если ваше здание игры или подобного. Я могу предоставить более глубокие образцы, если они вам понадобятся.

Используя эту идею, вы сможете создать анимацию своего изображения.

источник

2012-03-20 17:47:03 Spike

Вот простой пример анимации шарика отскока в холсте на холсте HTML5.

<body> 
<canvas id="Canvas01" width="400" height="400" style="border:5px solid #FF9933; margin-left:10px; margin-top:10px;"></canvas> 

<script> 
    var canvas = document.getElementById('Canvas01'); 
    var ctx = canvas.getContext('2d'); 
    var p = {x:25, y:25}; 
    var velo=6, corner=30, rad=20; 
    var ball={x:p.x, y:p.y}; 

    var moveX=Math.cos(Math.PI/180*corner) * velo; 
    var moveY=Math.sin(Math.PI/180*corner) * velo; 


    function DrawMe() { 
    ctx.clearRect(0,0,canvas.width, canvas.height); 

    if(ball.x>canvas.width-rad || ball.x<rad) moveX=-moveX; 
    if(ball.y>canvas.height-rad || ball.y<rad) moveY=-moveY; 

    ball.x +=moveX; 
    ball.y +=moveY; 

    ctx.beginPath(); 
    ctx.fillStyle = 'blue'; 
    ctx.arc(ball.x, ball.y, rad, 0 , Math.PI*2,false); 
    ctx.fill(); 
    ctx.closePath(); 
    } 

    setInterval(DrawMe,30); 

</script> 
</body>

вы можете попробовать себя здесь: http://codetutorial.com/examples-canvas/canvas-examples-bounce-ball

источник

2014-12-16 02:29:03 MichaelCalvin

Анимация изображений в HTML5 и на холсте

ответ

Смежные вопросы