在畫布上旋轉2張圖像

我必須在畫布上繪製3張圖像並需要旋轉2張圖像。在畫布上旋轉2張圖像

的圖像是像 1.圓形的，具有垂直直線 2.只是一個水平線 3.大的圓形圖像

我需要在畫布的中心旋轉所述第一2個圖像。

var canvas = document.getElementById('NewImage'); 
    var context = canvas.getContext('2d'); 
    context.canvas.width = window.innerWidth; 
    context.canvas.height = window.innerHeight*0.7; 
    var imageObj = new Image(); 
    var imageObj2 = new Image(); 
    var imageObj3 = new Image(); 

    imageObj.onload = function() { 
     context.save();  
     context.translate(imageObj.width/2,imageObj.height/2); 
     context.rotate(-10*Math.PI/180); 
     //context.translate(-imageObj.width/2,-imageObj.height/2); 
     context.drawImage(imageObj,-(imageObj.width/2),-(imageObj.height/2),context.canvas.width,context.canvas.height*0.85); 
     context.restore(); 
     context.save(); 
     context.globalCompositeOperation="source-over"; 
     context.translate(imageObj2.width/2,imageObj2.height/2); 
     context.rotate(-10*Math.PI/180); 
     context.translate(-imageObj2.width/2,-imageObj2.height/2); 
     context.drawImage(imageObj2, x, y,context.canvas.width,6); 
     context.restore(); 
     //context.rotate(10*Math.PI/180); 
     context.drawImage(imageObj3, 0, 0,context.canvas.width,context.canvas.height*0.9); 

    }; 
    imageObj.src = 'canvas/inner_circle_blackline_vertical.png'; 
    imageObj2.src = 'canvas/horizontal.png'; 
    imageObj3.src = 'canvas/outer_circle.png';

當我嘗試旋轉時，圖像不在中心旋轉。當第1個圖像旋轉時，它必須看起來像「X」符號。

我將如何旋轉畫布的中心。

謝謝:)

來源

2013-07-05 Beginner

@Gajotres可以請你幫我這個？ – Beginner

如果你創建一個[fiddle]（http://jsfiddle.net）來顯示你所得到的東西，那將會更容易一些。 –

至於設計，你imageObj2和imageObj3永遠不會加載。

這裏是一個通用的圖像加載器將加載所有的圖片，並將它們存儲在一個數組稱爲IMGS []。

當所有的圖像都滿載，渲染（）函數將被調用。那就是你開始繪畫的地方。

// This is an image loader 
// When render() is called, all your images are fully loaded 
var imgURLs = [ 
    "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png", 
    "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png", 
    "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"]; 
var imgs=[]; 
var imgCount=0; 

pre_load(); 

function pre_load(){ 

    for(var i=0;i<imgURLs.length;i++){ 

     var img=new Image(); 
     imgs.push(img); 
     img.onload=function(){   

      if(++imgCount>=imgs.length){ 
       // images are now fully loaded 
       render(); 
      } 

     } 
     img.src=imgURLs[i]; 
    } 
}

在render（）中，您只需繪製圖像。

由於同樣的動作（旋轉圖像）被重複做，你可以創建一個幫助函數來完成旋轉後拉。這裏的幫助函數是drawImageAtAngle。

// draw the rotated lines on the canvas 
function render(){ 

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

    drawImageAtAngle(imgs[0],x,y,-45); 
    drawImageAtAngle(imgs[2],x,y,45); 
    drawImageAtAngle(imgs[1],x,y,0); 
}

這裏進行旋轉;提供的圖像的角度提供輔助功能：

function drawImageAtAngle(image,X,Y,degrees){ 
    var radians=degrees*Math.PI/180; 
    var halfWidth=image.width/2; 
    var halfHeight=image.height/2; 
    ctx.beginPath(); 
    ctx.save(); 
    ctx.translate(X,Y); 
    ctx.rotate(radians); 
    ctx.drawImage(image,-halfWidth,-halfHeight); 
    ctx.restore(); 
}

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/ZShWW/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; padding:10px;} 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

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

    // This is an image loader 
    // When render() is called, all your images are fully loaded 
    var imgURLs = [ 
     "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png", 
     "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png", 
     "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"]; 
    var imgs=[]; 
    var imgCount=0; 

    pre_load(); 

    function pre_load(){ 

     for(var i=0;i<imgURLs.length;i++){ 

      var img=new Image(); 
      imgs.push(img); 
      img.onload=function(){   

       if(++imgCount>=imgs.length){ 
        // images are now fully loaded 
        render(); 
       } 

      } 
      img.src=imgURLs[i]; 
     } 
    } 


    // draw the rotated lines on the canvas 
    function render(){ 

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

     drawImageAtAngle(imgs[0],x,y,-45); 
     drawImageAtAngle(imgs[2],x,y,45); 
     drawImageAtAngle(imgs[1],x,y,0); 
    } 


    function drawImageAtAngle(image,X,Y,degrees){ 
     var radians=degrees*Math.PI/180; 
     var halfWidth=image.width/2; 
     var halfHeight=image.height/2; 
     ctx.beginPath(); 
     ctx.save(); 
     ctx.translate(X,Y); 
     ctx.rotate(radians); 
     ctx.drawImage(image,-halfWidth,-halfHeight); 
     ctx.restore(); 
    } 





}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>This is the line image</p> 
    <img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"> 
    <p>The line image rotated at center of canvas</p> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2013-07-05 17:55:42 markE

謝謝你的答案。我想要一些像這樣的東西我有一個圓形的圖像，現在我必須在中心繪製一條垂直線和一條水平線（水平線和垂直線之間的角度應該是90度），這是我能夠做到的。但之後我必須在一定程度上旋轉它們。並保持它們之間的中心和角度應該只有90°。我怎樣才能做到這一點？謝謝:) – Beginner

我答案中的drawImageAtAngle函數將允許您指定以任何角度繪製圖像。要在水平和垂直圖像之間建立90度角，請確保指定的度數不同於90.例如：drawImageAtAngle（yourHorizImage，150,150,120）加上drawImageAtAngle（yourVertImage，150,150,210）會將圖像旋轉90度（ 210度至120度）。如果爲水平和垂直圖像指定相同的x，y，則它們將以相同的中心繪製 - 在您的情況下，x，y將爲x = canvas.width/2 y = canvas.height/2。 – markE

非常全面的答案。 –

要找到畫布的中心，您必須使用畫布的尺寸。在你的代碼中，你正在使用圖像的尺寸。也就是說，這條線：

context.translate(imageObj.width/2,imageObj.height/2);

大概應該是：

context.translate(canvas.width/2,canvas.height/2);

這會移到畫布的中心。然後圍繞該中心發生旋轉。然後，您將繪製以原點爲中心的圖像。這部分看起來正確。

你會再反向旋轉，然後翻譯。

來源

2013-07-05 16:42:12

我試過，但沒有工作。我有一個圓形的圖像，現在我必須在中心繪製一條垂直線和一條水平線（水平線和垂直線之間的角度應該是90度），這是我能夠做到的。但之後我必須在一定程度上旋轉它們。並保持它們之間的中心和角度應該只有90°。我怎樣才能做到這一點？謝謝:) – Beginner

在畫布上旋轉2張圖像

回答

相關問題