java腳本畫布時鐘在正確的位置旋轉編號

時鐘位顯示不正確的位置如何旋轉正確的位置。我認爲不會收集每個數字的正確角度。java腳本畫布時鐘在正確的位置旋轉編號

這些代碼行有誤差，這裏是計算每個數字的角度

任一項FINDE錯誤和如何解決這個

以及如何計算模擬時鐘明智數字

for (var n = 1; n <=12; n++) { 
     var theta = (n - 12) * (Math.PI * 2)/12; 
     var x = clockRadius * 0.7 * Math.cos(theta); 
     var y = clockRadius * 0.7 * Math.sin(theta); 
     ctx.fillText(n, x, y); 
     ctx.rotate(theta); 
    }

clock image here

時鐘clocke

<canvas id="canvas" width="150" height="150"></canvas> 
<script> 


function init(){ 

    clock(); 
    setInterval(clock, 1000); 
} 
function toRad(degrees) { 
    return degrees * (Math.PI/180); 
} 
function clock(){ 

    var ctx = document.getElementById('canvas').getContext('2d'); 
    var clockRadius = 110; 
    ctx.save(); 
    ctx.clearRect(0,0,150,150); 
    ctx.translate(75,75); 
    ctx.scale(0.4,0.4); 
    ctx.rotate(-Math.PI/2); 
    ctx.fillStyle = "white"; 
    ctx.lineWidth = 8; 
    ctx.lineCap = "round"; 
ctx.font = '22px Helvetica,Arial,sans-serif'; 
    ctx.fillStyle = '#fff'; 
    ctx.textAlign = 'center'; 
    ctx.textBaseline = 'middle'; 

    var now = new Date($("#datetime").val()); 
    //alert(now); 
    var sec = now.getSeconds(); 
    var min = now.getMinutes(); 
    var hr = now.getHours(); 
    hr = hr>=12 ? hr-12 : hr; 

    for (var n = 1; n <=12; n++) { 
     var theta = (n - 12) * (Math.PI * 2)/12; 
     var x = clockRadius * 0.7 * Math.cos(theta); 
     var y = clockRadius * 0.7 * Math.sin(theta); 
     ctx.fillText(n, x, y); 
     ctx.rotate(theta); 
    } 

    ctx.strokeStyle = "white"; 
    ctx.save(); 
    for (var i=0; i < 12; i++){ 
    ctx.beginPath(); 
    ctx.rotate(Math.PI/6); 
    ctx.moveTo(100,0); 
    ctx.lineTo(120,0); 
    ctx.stroke(); 
    } 
    ctx.restore(); 

    // Minute marks 
    ctx.save(); 
    ctx.lineWidth = 5; 
    for (i=0;i<60;i++){ 
    if (i%5!=0) { 
     ctx.beginPath(); 
     ctx.moveTo(117,0); 
     ctx.lineTo(120,0); 
     ctx.stroke(); 
    } 
    ctx.rotate(Math.PI/30); 
    } 
    ctx.restore(); 

    ctx.fillStyle = "black"; 

    // write Hours 

    ctx.strokeStyle = "#4D514E"; 
    ctx.save(); 
    ctx.rotate(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec) 
    ctx.lineWidth = 14; 
    ctx.beginPath(); 
    ctx.moveTo(-20,0); 
    ctx.lineTo(80,0); 
    ctx.stroke(); 
    ctx.restore(); 

    // write Minutes 
    ctx.save(); 
    ctx.rotate((Math.PI/30)*min + (Math.PI/1800)*sec) 
    ctx.lineWidth = 10; 
    ctx.beginPath(); 
    ctx.moveTo(-28,0); 
    ctx.lineTo(110,0); 
    ctx.stroke(); 
    ctx.restore(); 

    // Write seconds 
    ctx.save(); 
    ctx.rotate(sec * Math.PI/30); 
    ctx.strokeStyle = "#D40000"; 
    ctx.fillStyle = "#D40000"; 
    ctx.lineWidth = 6; 
    ctx.beginPath(); 
    ctx.moveTo(-30,0); 
    ctx.lineTo(110,0); 
    ctx.stroke(); 
    ctx.beginPath(); 
    ctx.arc(0,0,10,0,Math.PI*2,true); 
    ctx.fill(); 
    ctx.beginPath(); 
    ctx.arc(0,0,10,0,Math.PI*2,true); 
    ctx.stroke(); 
    ctx.fillStyle = "rgba(0,0,0,0)"; 
    ctx.arc(0,0,3,0,Math.PI*2,true); 
    ctx.fill(); 
    ctx.restore(); 

    ctx.beginPath(); 
    ctx.lineWidth = 14; 
    ctx.strokeStyle = '#494545'; 
    ctx.arc(0,0,142,0,Math.PI*2,true); 
    ctx.stroke(); 


    ctx.restore(); 
} init(); 
</script>

來源

2017-08-31 noorwala

您在時鐘功能的線7旋轉整個背景。

function clock(){ 

    var ctx = document.getElementById('canvas').getContext('2d'); 
    var clockRadius = 110; 
    ctx.save(); 
    ctx.clearRect(0,0,150,150); 
    ctx.translate(75,75); 
    ctx.scale(0.4,0.4); 
    ctx.rotate(-Math.PI/2); // <-- remove this 
    ctx.fillStyle = "white"; 
    ...

您需要將其刪除。而不是這樣做，你可以在繪製武器時旋轉。

// write Hours 
ctx.rotate(-Math.PI/2 + hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec) 

// write Minutes 
ctx.rotate(-Math.PI/2 + (Math.PI/30)*min + (Math.PI/1800)*sec) 

// Write seconds 
ctx.rotate(-Math.PI/2 + sec * Math.PI/30);

（和用於繪圖數字的代碼將需要一個較小的修復）

var theta = (n - 3) * (Math.PI * 2)/12;

function init(){ 
 

 
    clock(); 
 
    setInterval(clock, 1000); 
 
} 
 
function toRad(degrees) { 
 
    return degrees * (Math.PI/180); 
 
} 
 
function clock(){ 
 

 
    var ctx = document.getElementById('canvas').getContext('2d'); 
 
    var clockRadius = 110; 
 
    ctx.save(); 
 
    ctx.clearRect(0,0,150,150); 
 
    ctx.translate(75,75); 
 
    ctx.scale(0.4,0.4); 
 
    ctx.fillStyle = "white"; 
 
    ctx.lineWidth = 8; 
 
    ctx.lineCap = "round"; 
 
ctx.font = '22px Helvetica,Arial,sans-serif'; 
 
    ctx.fillStyle = '#fff'; 
 
    ctx.textAlign = 'center'; 
 
    ctx.textBaseline = 'middle'; 
 

 
    var now = new Date('2000/1/1 ' + $("#datetime").val()); 
 
    //alert(now); 
 
    var sec = now.getSeconds(); 
 
    var min = now.getMinutes(); 
 
    var hr = now.getHours(); 
 
    hr = hr>=12 ? hr-12 : hr; 
 

 
    for (var n = 1; n <=12; n++) { 
 
     var theta = (n - 3) * (Math.PI * 2)/12; 
 
     var x = clockRadius * 0.7 * Math.cos(theta); 
 
     var y = clockRadius * 0.7 * Math.sin(theta); 
 
     ctx.fillText(n, x, y); 
 
    } 
 

 
    ctx.strokeStyle = "white"; 
 
    ctx.save(); 
 
    for (var i=0; i < 12; i++){ 
 
    ctx.beginPath(); 
 
    ctx.rotate(Math.PI/6); 
 
    ctx.moveTo(100,0); 
 
    ctx.lineTo(120,0); 
 
    ctx.stroke(); 
 
    } 
 
    ctx.restore(); 
 

 
    // Minute marks 
 
    ctx.save(); 
 
    ctx.lineWidth = 5; 
 
    for (i=0;i<60;i++){ 
 
    if (i%5!=0) { 
 
     ctx.beginPath(); 
 
     ctx.moveTo(117,0); 
 
     ctx.lineTo(120,0); 
 
     ctx.stroke(); 
 
    } 
 
    ctx.rotate(Math.PI/30); 
 
    } 
 
    ctx.restore(); 
 

 
    ctx.fillStyle = "black"; 
 

 
    // write Hours 
 

 
    ctx.strokeStyle = "#4D514E"; 
 
    ctx.save(); 
 
    ctx.rotate(-Math.PI/2 + hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec) 
 
    ctx.lineWidth = 14; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(-20,0); 
 
    ctx.lineTo(80,0); 
 
    ctx.stroke(); 
 
    ctx.restore(); 
 

 
    // write Minutes 
 
    ctx.save(); 
 
    ctx.rotate(-Math.PI/2 +(Math.PI/30)*min + (Math.PI/1800)*sec) 
 
    ctx.lineWidth = 10; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(-28,0); 
 
    ctx.lineTo(110,0); 
 
    ctx.stroke(); 
 
    ctx.restore(); 
 

 
    // Write seconds 
 
    ctx.save(); 
 
    ctx.rotate(-Math.PI/2 +sec * Math.PI/30); 
 
    ctx.strokeStyle = "#D40000"; 
 
    ctx.fillStyle = "#D40000"; 
 
    ctx.lineWidth = 6; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(-30,0); 
 
    ctx.lineTo(110,0); 
 
    ctx.stroke(); 
 
    ctx.beginPath(); 
 
    ctx.arc(0,0,10,0,Math.PI*2,true); 
 
    ctx.fill(); 
 
    ctx.beginPath(); 
 
    ctx.arc(0,0,10,0,Math.PI*2,true); 
 
    ctx.stroke(); 
 
    ctx.fillStyle = "rgba(0,0,0,0)"; 
 
    ctx.arc(0,0,3,0,Math.PI*2,true); 
 
    ctx.fill(); 
 
    ctx.restore(); 
 

 
    ctx.beginPath(); 
 
    ctx.lineWidth = 14; 
 
    ctx.strokeStyle = '#494545'; 
 
    ctx.arc(0,0,142,0,Math.PI*2,true); 
 
    ctx.stroke(); 
 

 

 
    ctx.restore(); 
 
} init();

canvas { 
 
background: blue; 
 
}

<input type="time" id="datetime" value="03:45:01"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="canvas" width="150" height="150"></canvas> 
 
<script> 
 

 

 

 
</script>

來源

2017-08-31 19:27:08 TCPN

由於您在clock函數的開頭呼叫ctx.rotate(-Math.PI/2)，因此需要將數字旋轉回去。爲此，您需要首先將上下文轉換爲數字座標，然後將上下文旋轉Math.PI/2。

在您更換這部分代碼的for循環：

ctx.fillText(n, x, y); 
ctx.rotate(theta);

與此：

ctx.save(); 
ctx.translate(x, y); 
ctx.rotate(Math.PI/2); 
ctx.fillText(n, 0, 0); 
ctx.restore();

來源

2017-08-31 19:20:46 nrg

java腳本畫布時鐘在正確的位置旋轉編號

回答

相關問題