कैनवास नीचे केंद्र छवि कोण से घूमते हैं?

आप नीचे केंद्र कोण से कैनवास html5 तत्व के साथ एक छवि को घुमाते हैं?कैनवास नीचे केंद्र छवि कोण से घूमते हैं?

<html> 
    <head> 
     <title>test</title> 
     <script type="text/javascript"> 
      function startup() { 
       var canvas = document.getElementById('canvas'); 
       var ctx = canvas.getContext('2d'); 
       var img = new Image(); 
       img.src = 'player.gif'; 
       img.onload = function() { 
        ctx.translate(185, 185); 
        ctx.rotate(90 * Math.PI/180); 
        ctx.drawImage(img, 0, 0, 64, 120); 
       } 
      } 
     </script> 
    </head> 
    <body onload='startup();'> 
     <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas> 
    </body> 
</html>

दुर्भाग्य से यह छवि के ऊपरी बाएं कोण से घूमता प्रतीत होता है। कोई उपाय?

संपादित करें: अंत में ऑब्जेक्ट (स्पेस शिप) को घड़ी सूचक की तरह घूमना पड़ता है, जैसे कि यह दाएं/बाएं मोड़ रहा है।

स्रोत

2008-12-13 Tom

http://code.google.com/p/explorercanvas/ यह आप महान पार ब्राउज़र समर्थन जोड़ने जाएगा, यह एक ही बात के बाद से IE के लिए आप वास्तव में VML का उपयोग करेगा –

भी देखें नहीं है HTML5 कैनवास आर्बिट्रेट प्वाइंट के बारे में छवि को घुमाने के लिए] (http://stackoverflow.com/questions/4649836/using-html5-canvas-rotate-image-about-arbitrary-point) – Phrogz

सबसे पहले आपको उस बिंदु पर अनुवाद करना होगा जिसके आसपास आप घूमना चाहते हैं। इस मामले में छवि आयाम, 120.

ctx.translate(32, 120);

चित्र के नीचे केंद्र पर ले आता है यही कारण है कि 64 एक्स 120 नीचे बीच में आप 32 में अनुवाद करना चाहते चारों ओर घुमाने के लिए कर रहे हैं।

ctx.rotate(90 * Math.PI/180);

कौन सा 90 डिग्री से बारी बारी से: फिर कैनवास बारी बारी से।

ctx.drawImage(img, -32, -120, 64, 120);

फिर जब आप आकर्षित छवि इस कोशिश? क्या वह काम करता है?

स्रोत

2008-12-13 16:51:04

वास्तव में अद्भुत: धन्यवाद। मुझे लगता है कि अब मुझे लटका मिल रहा है। – Tom

अपडेट: हालांकि कोई समस्या है, बाएं तरफ मुझे लगता है कि चौड़ाई के कारण कट ऑफ हो रहा है। इसे ठीक करने का कोई तरीका है लेकिन अभी भी यह महान कोण है? – Tom

ऐसा लगता है कि मैंने इसे ctx.translate (232, 120) सेट करके तय किया है; - स्वीकृत उत्तर के रूप में अपना उत्तर सेट करें :) – Tom

सही उत्तर, विन्सेंट का एक सही जवाब है।
मैं इस रोटेशन/अनुवाद बात के साथ एक सा अनिश्चितता से, और मुझे लगता है कि मेरी छोटी प्रयोगों के लिए दिलचस्प हो सकता है:

<html> 
    <head> 
    <title>test</title> 
    <script type="text/javascript"> 
    canvasW = canvasH = 800; 
    imgW = imgH = 128; 
    function startup() { 
     var canvas = document.getElementById('canvas'); 
     var ctx = canvas.getContext('2d'); 
     // Just to see what I do... 
     ctx.strokeRect(0, 0, canvasW, canvasH); 
     var img = new Image(); 
     img.src = 'player.png'; 
     img.onload = function() { 
     // Just for reference 
     ctx.drawImage(img, 0, 0, 128, 128); 
     ctx.drawImage(img, canvasW/2 - imgW/2, canvasH/2 - imgH/2, 128, 128); 
     mark(ctx, "red"); 
     // Keep current context (transformations) 
     ctx.save(); 
     // Put bottom center at origin 
     ctx.translate(imgW/2, imgH); 
     // Rotate 
     // Beware the next translations/positions are done along the rotated axis 
     ctx.rotate(45 * Math.PI/180); 
     // Mark new origin 
     mark(ctx, "red"); 
     // Restore position 
     ctx.translate(-imgW/2, -imgH); 
     ctx.drawImage(img, 0, 0, imgW, imgH); 
     mark(ctx, "green"); 
     // Draw it an wanted position 
     ctx.drawImage(img, canvasW/2, canvasH/3, imgW, imgH); 
     // Move elsewhere: 
     ctx.translate(canvasW/2, canvasH/2); 
     ctx.drawImage(img, 0, 0, imgW, imgH); 
     mark(ctx, "blue"); 
     ctx.restore(); 
     } 
    } 
    function mark(ctx, color) { 
    ctx.save(); 
//~  ctx.fillStyle = color; 
//~  ctx.fillRect(-2, -2, 4, 4); 
    ctx.strokeStyle = color; 
    ctx.strokeRect(0, 0, imgW, imgH); 
    ctx.restore(); 
    } 
    </script> 
    </head> 
    <body onload='startup();'> 
    <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas> 
    </body> 
</html>

मेरे ठोकर मुद्दा यह था कि स्थिति घुमाया आंकड़ा मुश्किल है, क्योंकि यह घुमाया साथ है धुरी: या तो हमें आदिम मूल पर पेंट करने के लिए कुछ ट्रिगो गणित करना है, या हमें द्वितीयक छिपे हुए कैनवास पर आकर्षित करना है और फिर उसे लक्ष्य पर पेंट करना है।
जब तक किसी और के पास कोई बेहतर विचार न हो?

स्रोत

2008-12-14 10:01:19 PhiLho

-1

<html> 
    <head> 
    <title>Canvas Pinball flippers by stirfry</title> 
    <script type="application/x-javascript"> 
    /*THIS SCRIPT ADAPTED BY STIRFRY. SOURCE TEETHGRINDER no warranty or liability implied or otherwise. use at your own risk. No credit required. Enjoy.stirfry.thank(you)*/ 
    var img = new Image(); 
          //img.src = "flipper.gif";//right 
    img.src="http://i39.tinypic.com/k1vq0x.gif" 
    var img2 = new Image(); 
          //img2.src = "flipper2.gif";//left 
    img2.src ="http://i42.tinypic.com/14c8wht.gif" 
    var gAngle = 0; 
    gAngle = 60; 
    stop = false; 
    inertia = .8; 
    vel = 10; 
    k = 0.1; 

    function drawagain(){ 
     gAngle = 60; 
     stop = false; 
     inertia = .8; 
     vel = 10; 
     k = 0.1; 
    draw() 
    } 

    function draw(){ 
    var ctx = document.getElementById('canvas').getContext('2d'); 
    ctx.save(); 

     vel = (vel * inertia) + (-gAngle * k); 

     gAngle += vel; 

     ctx.fillStyle = 'rgb(255,255,255)'; 
     ctx.fillRect (0, 0, 600, 600); 

     ctx.translate(380, 480);    //location of the system 
     ctx.rotate(gAngle * Math.PI/180);//rotate first then draw the flipper 
     ctx.drawImage(img, -105, -16); 
ctx.restore(); 
ctx.save(); 
     ctx.translate(120, 480);    //location of the system 
     ctx.rotate(-1*gAngle * Math.PI/180);//rotate first then draw the flipper 
     ctx.drawImage(img2, -18, -16); 

ctx.restore(); 

     if(!stop) 
      setTimeout(draw, 30); 
     } 

    </script> 
    <style type="text/css"> 
     body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;} 
     h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; } 
     canvas { border: 2px solid #000; float: left; margin-right: 20px; margin-bottom: 20px; } 
     pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; } 
     .gameLayer {position: absolute; top: 0px; left: 0px;} 
     #scoreLayer {font-family: arial; color: #FF0000; left: 10px; font-size: 70%; } 
     #windowcontainer {position:relative; height:300px;} 
    </style> 
    </head> 

    <body onload="draw()"> 
    <div id="windowcontainer"> 
     <canvas id="canvas" width="500" height="500"></canvas> 
     <INPUT VALUE="flip" TYPE=BUTTON onClick="drawagain();"><br/> 
    </div> 

    </body> 
</html>

स्रोत

2009-01-07 23:04:03

आपके उदाहरण में त्रुटियां हैं। –

मैंने इसका उपयोग किया है, जब मुझे अपने निर्दिष्ट बिंदु (केंद्र) से शुरू होने वाले ग्रंथों को घुमाने की आवश्यकता है? [का उपयोग

ctx.save(); 
ctx.translate(x,y); 
ctx.rotate(degree*Math.PI/180); 
ctx.translate(-x,-y); 
ctx.fillText(text,x,y); 
ctx.stroke(); 
ctx.restore();

स्रोत

2013-04-04 18:40:38

कैनवास नीचे केंद्र छवि कोण से घूमते हैं?

उत्तर

संबंधित मुद्दे