旋转绘制的圆形ind Javascript HTML5画布

Question

i have a Canvas:

  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); bild.save(); bild.translate(100,100); bild.rotate((360-Compass)*Math.PI/180); bild.fillStyle = "rgb(0,0,0)"; bild.font = '8pt Arial'; bild.fillText('N', 102, 30); bild.fillText('E', 170, 110); bild.fillText('S', 92, 170); bild.fillText('W', 30, 96); bild.closePath() bild.strokeStyle= "rgb(0,0,0)"; // schwarz bild.beginPath(); bild.lineWidth = 2; bild.arc(100,100,95,0,Math.PI*2,true); bild.moveTo(105,100); bild.lineTo(195,100); bild.moveTo(100,105); bild.lineTo(100,195); bild.moveTo(95,100); bild.lineTo(5,100); bild.moveTo(100,95); bild.lineTo(100,5); bild.moveTo(105,100); bild.arc(100,100,5,0,Math.PI*2,true); bild.closePath() bild.stroke(); bild.beginPath(); bild.lineWidth = 5; if(Azimuth>=0&&Distance>=1) { bild.arc(100,100,85,0,Math.PI*2,true); bild.arc(100,100,85,0,(Azimuth-90)*(Math.PI/180),true); bild.lineTo(100,100); } if(Distance<=1) { bild.arc(100,100,2,0,Math.PI*2,true); } bild.strokeStyle= "#00FF00";//green bild.stroke(); bild.translate(-100,-100); 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> 

Like u can see, i want to rotate the canvas. Its a kind of Compass for a FXOS-App. I know how to rotate an image, but i dont get it to work with this drawing. The "Compass" Variable is the Deviceorientation un Degrees. So if you point the device to east, the Compass must be rotated 90degrees to the left...

Maybe some of you has got an idea.

regards

goerdy

Answer 1

I would use offscreen canvas to draw to the compass and then rotate that as an image onto my main canvas like (Example hardcoded values(azimuth and distance) and get deg from 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);

};