Canvas xoay từ góc ảnh trung tâm dưới cùng?

Làm cách nào để xoay hình ảnh bằng phần tử canvas html5 từ góc giữa dưới cùng?Canvas xoay từ góc ảnh trung tâm dưới cùng?

<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>

Thật không may điều này dường như xoay nó từ góc trên cùng bên trái của hình ảnh. Bất kỳ ý tưởng?

Chỉnh sửa: cuối đối tượng (tàu không gian) phải xoay như con trỏ đồng hồ, như thể nó đang rẽ phải/trái.

Nguồn

2008-12-13 Tom

http://code.google.com/p/explorercanvas/ Nó sẽ thêm bạn hỗ trợ trình duyệt chéo lớn, nó không phải là điều tương tự kể từ khi cho IE, bạn sẽ thực sự sử dụng VML –

Xem thêm [Sử dụng HTML5 Canvas Xoay hình ảnh về điểm tùy ý] (http://stackoverflow.com/questions/4649836/using-html5-canvas-rotate-image-about-arbitrary-point) – Phrogz

Trước tiên, bạn phải dịch đến điểm mà bạn muốn xoay vòng. Trong trường hợp này kích thước hình ảnh là 64 x 120. Để xoay quanh tâm dưới cùng bạn muốn dịch sang 32, 120.

ctx.translate(32, 120);

Điều đó sẽ đưa bạn đến trung tâm dưới cùng của hình ảnh. Sau đó xoay canvas:

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

Xoay 90 độ.

Sau đó, khi bạn vẽ hình ảnh thử này:

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

? Điều đó có hiệu quả không?

Nguồn

2008-12-13 16:51:04

Thật đáng kinh ngạc: cảm ơn lần nữa. Tôi nghĩ rằng tôi đang nhận được hang của nó ngay bây giờ. – Tom

Cập nhật: có một vấn đề mặc dù, phía bên trái là nhận được cắt do ot chiều rộng tôi nghĩ. Bất kỳ cách nào để khắc phục điều đó nhưng vẫn có góc độ tuyệt vời này? – Tom

Có vẻ như tôi đã sửa nó bằng cách đặt ctx.translate (232, 120); - thiết lập câu trả lời của bạn là câu trả lời được chấp nhận :) – Tom

Câu trả lời đúng là, tất nhiên, câu trả lời của Vincent.
Tôi mò mẫm một chút với điều này xoay/dịch thuật, và tôi nghĩ rằng các thí nghiệm nhỏ của tôi có thể là thú vị để hiển thị:

<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>

vấn đề ngại của tôi là định vị hình xoay là khó khăn, bởi vì nó là dọc theo xoay trục: hoặc là chúng ta phải thực hiện một số phép toán trigo để vẽ ở gốc nguyên thủy, hoặc chúng ta phải vẽ trên một khung hình thứ cấp ẩn và sau đó vẽ nó lên mục tiêu.
Trừ khi ai đó khác có ý tưởng tốt hơn?

Nguồn

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>

Nguồn

2009-01-07 23:04:03

Ví dụ của bạn có lỗi. –

Tôi đã sử dụng điều này, khi nào tôi cần xoay văn bản bắt đầu từ điểm được chỉ định (giữa)?

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();

Nguồn

2013-04-04 18:40:38

Canvas xoay từ góc ảnh trung tâm dưới cùng?

Trả lời

Các vấn đề liên quan