एक एचटीएमएल कैनवास

Question

पर एक छवि को स्थानांतरित करना मैं एक छवि को दाईं ओर से केंद्र में स्थानांतरित करने की कोशिश कर रहा हूं और मुझे यकीन नहीं है कि यह सबसे अच्छा तरीका है या नहीं।

var imgTag = null; 
    var x = 0; 
    var y = 0; 
    var id; 

    function doCanvas() 
    { 
     var canvas = document.getElementById('icanvas'); 
     var ctx = canvas.getContext("2d"); 
     var imgBkg = document.getElementById('imgBkg'); 
     imgTag = document.getElementById('imgTag'); 

     ctx.drawImage(imgBkg, 0, 0); 

     x = canvas.width; 
     y = 40; 

     id = setInterval(moveImg, 0.25); 

    } 

    function moveImg() 
    { 
     if(x <= 250) 
      clearInterval(id); 

     var canvas = document.getElementById('icanvas'); 
     var ctx = canvas.getContext("2d"); 

     ctx.clearRect(0, 0, canvas.width, canvas.height); 

     var imgBkg = document.getElementById('imgBkg'); 
     ctx.drawImage(imgBkg, 0, 0); 

     ctx.drawImage(imgTag, x, y); 

     x = x - 1; 
    } 

कोई सलाह?

Answer 1

drawImage() लक्ष्य छवि कैनवास पर स्रोत छवि के किस भाग को परिभाषित करने में सक्षम बनाता है। मैं प्रत्येक moveImg() की पिछली छवि स्थिति की गणना करने के लिए सुझाव दूंगा, पिछली छवि को imgBkg के उस भाग के साथ ओवरराइट करें, फिर नई छवि खींचें। माना जाता है कि यह कुछ कंप्यूटिंग पावर बचाएगा।

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 एक विशेष समारोह मुद्दों का कारण बनता है जब एक साथ एनिमेशन की बड़ी राशि जगह ले, लेकिन फ़्रेमदर अधिक बुद्धिमानी के साथ kinetic.Animation से संबंधित है।

Answer 3

यह सवाल 5 साल पुराना है, लेकिन जब से हम अब requestAnimationFrame है, यहाँ का उपयोग कर वेनिला जावास्क्रिप्ट के लिए एक दृष्टिकोण है:

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>