एक मनमानी बिंदु के चारों ओर घूर्णन: एचटीएमएल 5 कैनवास

Question

अद्भुत गायब आयताकार देखें!

लेकिन गंभीरता से मेरे पास वास्तव में एक साधारण HTML5 कैनवास है जो सिर्फ आयताकार खींचता है (के कारण) के बजाय लाइन का उपयोग करके।

मेरी समस्या: मैं आयताकार 90 डिग्री घुमाने की कोशिश कर रहा हूं। आयताकार 90 डिग्री घुमाया जाना चाहिए, लेकिन इसके बजाय यह गायब हो जाता है।

मेरी webapp परियोजना में मैं जब मैं एचटीएमएल 5 कैनवास में 'मेरे जटिल बहुभुज बारी बारी से अजीब एक्स हो रही है, वाई प्लेसमेंट त्रुटियां, तो मैं रोटेशन & परीक्षण करने के लिए अपने चारों ओर अपने एक्स घूर्णन सुनिश्चित इस साधारण HTML बनाया है, 100,100 के y बिंदु । लेकिन जब भी मैं एक आकार घुमाने की कोशिश करता हूं तो यहां तक ​​कि अजीब परिणाम भी होते हैं।

क्या कोई मुझे बता सकता है कि मेरे आयत को कैसे दिखाना है & मैं अपने बहुभुज को एक विशिष्ट बिंदु के चारों ओर कैसे घुमा सकता हूं बिना उन्हें पूरी तरह से x, y मानों को बदलता हूं।

क्या किसी ने एचटीएमएल 5 कैनवास के साथ इस समस्या का अनुभव किया है & इसे ठीक करने के लिए समाधान पता है?

<canvas id="testCanvas" width="900px" height="900px" style="background-color: blue;"> 

</canvas> 
<script type="text/javascript"> 

    var canvas = document.getElementById("testCanvas"); 
    var dc  = canvas.getContext("2d"); 

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

    dc.save(); 
    dc.fillStyle = "#FF0000"; 

    dc.rotate(90*Math.PI/180); // rotate 90 degrees 
    dc.beginPath(); 
    dc.moveTo(100, 100); 
    dc.lineTo(200, 100); 
    dc.lineTo(200,300); 
    dc.lineTo(100,300); 
    dc.closePath(); 
    dc.fill(); 

    dc.restore(); 
--> 
</script> 

Answer 1

एक बिंदु के चारों ओर घूमने के लिए आपको 3 चरणों की आवश्यकता है।

• पहले संदर्भ को उस केंद्र में अनुवाद करें जिसका आप घूमना चाहते हैं।
• फिर वास्तविक रोटेशन करें।
• फिर संदर्भ को वापस अनुवाद करें।

इस तरह

:

var canvas = document.getElementById("testCanvas"); 
var dc  = canvas.getContext("2d"); 
var angle = 0; 
window.setInterval(function(){ 
    angle = (angle + 1) % 360; 
    dc.clearRect(0, 0, canvas.width, canvas.height); 

    dc.save(); 
    dc.fillStyle = "#FF0000"; 

    dc.translate(150,200); 
    dc.rotate(angle*Math.PI/180); 
    dc.translate(-150,-200); 

    dc.beginPath(); 
    dc.moveTo(100, 100); 
    dc.lineTo(200, 100); 
    dc.lineTo(200,300); 
    dc.lineTo(100,300); 
    dc.closePath(); 
    dc.fill(); 

    dc.restore(); 
}, 5); 

Answer 2

जब आप कैनवास घुमाने के लिए, यह मूल (0, 0), तो अपनी आयत समाप्त होता है बंद स्क्रीन घुमाया होने से घूमता है।

इस उदाहरण है जहां यह 45 डिग्री केवल घुमाया है देखें: इस इसकी चौड़ाई & ऊंचाई से कैनवास अनुवाद करने के लिए है तय करने के लिए http://jsfiddle.net/wjLSm/

एक तरह से/2: http://jsfiddle.net/wjLSm/1/ (तब 0,0 बीच में है - हो सकता है इसके बारे में पता)