旋轉IND的Javascript HTML5畫布

Question

描畫圓我有一個帆布：

function drawWindRose(){ 
 
     var canvas = document.getElementById('windrose'); 
 
     var bild = canvas.getContext('2d'); 
 
\t \t \t \t var frame = canvas.getContext('2d'); 
 
     frame.fillStyle = "rgb(200,0,0)"; 
 
     frame.fillRect (0, 0, 200, 200); 
 
\t \t \t \t 
 
\t 
 
\t bild.save(); 
 
\t bild.translate(100,100); 
 
\t bild.rotate((360-Compass)*Math.PI/180); 
 
\t \t \t \t 
 
\t bild.fillStyle = "rgb(0,0,0)"; 
 
\t \t \t \t bild.font = '8pt Arial'; 
 
     \t bild.fillText('N', 102, 30); 
 
\t \t \t \t bild.fillText('E', 170, 110); 
 
\t \t \t \t bild.fillText('S', 92, 170); 
 
\t \t \t \t bild.fillText('W', 30, 96); 
 
    
 
    
 
    
 
    bild.closePath() 
 
    bild.strokeStyle= "rgb(0,0,0)"; // schwarz 
 
\t bild.beginPath(); 
 
\t bild.lineWidth = 2; 
 
\t bild.arc(100,100,95,0,Math.PI*2,true); 
 
\t bild.moveTo(105,100); 
 
\t bild.lineTo(195,100); 
 
\t bild.moveTo(100,105); 
 
\t bild.lineTo(100,195); 
 
\t bild.moveTo(95,100); 
 
\t bild.lineTo(5,100); 
 
\t bild.moveTo(100,95); 
 
\t bild.lineTo(100,5); 
 
\t bild.moveTo(105,100); 
 
\t bild.arc(100,100,5,0,Math.PI*2,true); 
 
\t bild.closePath() 
 
\t bild.stroke(); 
 
\t 
 
\t bild.beginPath(); 
 
\t bild.lineWidth = 5; 
 
\t if(Azimuth>=0&&Distance>=1) 
 
\t \t { 
 
\t bild.arc(100,100,85,0,Math.PI*2,true); 
 
\t bild.arc(100,100,85,0,(Azimuth-90)*(Math.PI/180),true); 
 
\t bild.lineTo(100,100); 
 
\t \t } 
 
\t if(Distance<=1) 
 
\t \t { 
 
\t bild.arc(100,100,2,0,Math.PI*2,true); 
 
\t \t } 
 
\t bild.strokeStyle= "#00FF00";//green 
 
\t bild.stroke(); 
 
\t 
 
\t 
 
\t bild.translate(-100,-100); 
 
\t bild.restore(); 
 
};

  <canvas style="padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; display: block;"id="windrose" width="200" height="200"> Ihr Browser kann kein Canvas! </canvas>

像你所看到的，我想旋轉畫布。它是FXOS-App的一種指南針。 我知道如何旋轉圖像，但我沒有得到它與這幅圖畫一起工作。 「指南針」變量是設備取向度數。 因此，如果您將設備指向東方，指南針必須向左旋轉90度...

也許你們中的一些人有了一個想法。

問候

goerdy

Answer 1

我將使用屏幕外帆布繪製到羅盤，然後旋轉，作爲一個圖像到我的像（實施例硬編碼值（方位和距離）主畫布和從HTML得到度）：

window.onload = setupRose; 
var TO_RADIANS = Math.PI/180; 

function drawRotatedImage(context, image, x, y, angle) { 
    var canvas = document.getElementById('myCanvas'); 
    context.save(); 
    context.translate(x, y); 
    context.rotate(angle * TO_RADIANS); 
    context.drawImage(image, -(image.width/2), -(image.height/2), image.width, image.height); 
    context.restore(); 
} 
var myCompass = {}; 

function setupRose() { 
    myCompass.g_canvas = document.createElement('canvas'); 
    myCompass.g_canvas.width = 200; 
    myCompass.g_canvas.height = 200; 
    m_context = myCompass.g_canvas.getContext('2d'); 

    m_context.fillStyle = "rgb(0,0,0)"; 
    m_context.font = '8pt Arial'; 
    m_context.fillText('N', 102, 30); 
    m_context.fillText('E', 170, 110); 
    m_context.fillText('S', 92, 170); 
    m_context.fillText('W', 30, 96); 


    m_context.strokeStyle = "rgb(0,0,0)"; // schwarz 
    m_context.beginPath(); 
    m_context.lineWidth = 2; 
    m_context.arc(100, 100, 95, 0, Math.PI * 2, true); 
    m_context.moveTo(105, 100); 
    m_context.lineTo(195, 100); 
    m_context.moveTo(100, 105); 
    m_context.lineTo(100, 195); 
    m_context.moveTo(95, 100); 
    m_context.lineTo(5, 100); 
    m_context.moveTo(100, 95); 
    m_context.lineTo(100, 5); 
    m_context.moveTo(105, 100); 
    m_context.arc(100, 100, 5, 0, Math.PI * 2, true); 
    m_context.closePath() 
    m_context.stroke(); 

    m_context.beginPath(); 
    m_context.lineWidth = 5; 
    if (32 >= 0 && 13 >= 1) { 
     m_context.arc(100, 100, 85, 0, Math.PI * 2, true); 
     m_context.arc(100, 100, 85, 0, (32 - 90) * (Math.PI/180), true); 
     m_context.lineTo(100, 100); 
    } 
    if (13 <= 1) { 
     m_context.arc(100, 100, 2, 0, Math.PI * 2, true); 
    } 
    m_context.strokeStyle = "#00FF00"; //green 
    m_context.stroke(); 

} 

function drawWindRose() { 
    var canvas = document.getElementById('windrose'); 
    var bild = canvas.getContext('2d'); 
    var frame = canvas.getContext('2d'); 
    frame.fillStyle = "rgb(200,0,0)"; 
    frame.fillRect(0, 0, 200, 200); 

    var deg = parseFloat(document.getElementById("degrees").value); 
    if (!deg) deg = 0; 

    drawRotatedImage(bild, myCompass.g_canvas, 100, 100, deg); 

};