在Javascript HTML5 Canvas中旋转绘制的圆圈

Rotating a drawn circle ind Javascript HTML5 Canvas

本文关键字：绘制旋转 Javascript HTML5 Canvas 更新时间：2023-09-26

我有一个画布：

 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>

正如你所看到的，我想旋转画布。这是FXOS应用程序的指南针。我知道如何旋转图像，但我不知道如何使用这幅画。"指南针"变量是设备方向（单位：度）。因此，如果你将设备指向东方，指南针必须向左旋转90度。。。

也许你们中的一些人有个主意。

关于

goerdy

我会使用屏幕外画布绘制指南针，然后将其作为图像旋转到我的主画布上，如（例如硬编码值（方位角和距离）和从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);
};