0
描畫圓我有一個帆布:旋轉IND的Javascript HTML5畫布
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
也許你應該嘗試CSS動畫,每當度數值發生變化時旋轉畫布 – EdoPut 2015-02-10 08:08:12