एचटीएमएल 5 कैनवास ड्रा इमेज

Question

पर मैं <canvas> में एनीमेशन के साथ प्रयोग कर रहा हूं और कोण पर एक छवि को आकर्षित करने के तरीके से बाहर काम नहीं कर सकता। वांछित प्रभाव सामान्य रूप से खींची गई कुछ छवियां होती हैं, जिसमें एक छवि धीरे-धीरे घूमती है। (यह छवि स्क्रीन के केंद्र में नहीं है, अगर इससे कोई फर्क पड़ता है)।

Answer 1

आपको उस छवि को चित्रित करने से पहले रूपांतरण मैट्रिक्स को संशोधित करने की आवश्यकता है जिसे आप घुमाएंगे।

HTMLImageElement ऑब्जेक्ट पर छवि बिंदु मानें।

var x = canvas.width/2; 
var y = canvas.height/2; 
var width = image.width; 
var height = image.height; 

context.translate(x, y); 
context.rotate(angleInRadians); 
context.drawImage(image, -width/2, -height/2, width, height); 
context.rotate(-angleInRadians); 
context.translate(-x, -y); 

एक्स, वाई निर्देशांक कैनवास पर छवि का केंद्र है।

Answer 2

मैं एक समारोह (जेकब के जवाब के आधार पर) है कि उपयोगकर्ता एक एक्स में एक छवि पेंट करने के लिए अनुमति देता है लिखा है, एक कस्टम रोटेशन बिंदु में एक कस्टम रोटेशन के आधार पर Y स्थिति:

function rotateAndPaintImage (context, image, angleInRad , positionX, positionY, axisX, axisY) { 
    context.translate(positionX, positionY); 
    context.rotate(angleInRad); 
    context.drawImage(image, -axisX, -axisY); 
    context.rotate(-angleInRad); 
    context.translate(-positionX, -positionY); 
} 

तो फिर तुम फोन कर सकते हैं यह इस तरह है:

var TO_RADIANS = Math.PI/180; 
ctx = document.getElementById("canvasDiv").getContext("2d"); 
var imgSprite = new Image(); 
imgSprite.src = "img/sprite.png"; 

// rotate 45º image "imgSprite", based on its rotation axis located at x=20,y=30 and draw it on context "ctx" of the canvas on coordinates x=200,y=100 
rotateAndPaintImage (ctx, imgSprite, 45*TO_RADIANS, 200, 100, 20, 30); 

Answer 3

यह दिलचस्प है कि पहले समाधान ने इतने सारे लोगों के लिए काम किया, यह मुझे आवश्यक परिणाम नहीं दिया। अंत मैं यह करने के लिए किया था में:

ctx.save(); 
ctx.translate(positionX, positionY); 
ctx.rotate(angle); 
ctx.translate(-x,-y); 
ctx.drawImage(image,0,0); 
ctx.restore(); 

जहां (positionX, positionY) कैनवास मैं चाहता हूँ कि छवि पर स्थित होना करने के लिए और (x, y) छवि जहां मैं छवि घुमाना चाहते पर है पर निर्देशांक है।