Добавление изображения в объект с помощью Javascript Canvas [duplicate]

Question

Добавление изображения в объект с помощью Javascript Canvas [duplicate]

Так как никто еще не упомянул оператор %, то здесь. Он только усекает, и вы не можете полагаться на возвращаемое значение, чтобы не иметь неточностей с плавающей запятой, но иногда это удобно:

scala> 1.23456789 - (1.23456789 % 0.01)
res4: Double = 1.23

6

javascript animation canvas

задан iJK 16 June 2010 в 22:04

3 ответа

Другие вопросы по тегам:

javascript animation canvas

Похожие вопросы:

score 3 · Answer 1

Этот вопрос составляет 5 лет, но поскольку теперь у нас есть requestAnimationFrame, для этого используется подход с использованием ванильного JavaScript:

var imgTag = new Image();
var canvas = document.getElementById('icanvas');
var ctx = canvas.getContext("2d");
var x = canvas.width;
var y = 0;

imgTag.onload = animate;
imgTag.src = "http://i.stack.imgur.com/Rk0DW.png";   // load image

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // clear canvas
  ctx.drawImage(imgTag, x, y);                       // draw image at current position
  x -= 4;
  if (x > 250) requestAnimationFrame(animate)        // loop
}

<canvas id="icanvas" width=640 height=180></canvas>

score 1 · Answer 2

Для анимации без запаздывания я обычно использую kinetic.js.

 var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();

      var hexagon = new Kinetic.RegularPolygon({
        x: stage.width()/2,
        y: stage.height()/2,
        sides: 6,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      });

      layer.add(hexagon);
      stage.add(layer);

      var amplitude = 150;
      var period = 2000;
      // in ms
      var centerX = stage.width()/2;

      var anim = new Kinetic.Animation(function(frame) {
        hexagon.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
      }, layer);

      anim.start();

Вот пример, если вы хотите взглянуть.

http: // www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-animate-position-tutorial/

Почему я предлагаю это потому, что setInterval или setTimeout определенная функция вызывает проблемы, когда большое количество одновременная анимация имеет место, но кинетика. Анимация более рационально работает с фреймами.

score 1 · Answer 3

drawImage() позволяет определить, какую часть исходного изображения будет рисовать на целевом холсте. Я бы предложил для каждого moveImg() рассчитать предыдущую позицию изображения, переписать предыдущее изображение с той частью imgBkg, а затем нарисовать новое изображение. Предположительно, это сэкономит вычислительную мощность.