HTML5畫布測速儀不需要與

我一直在使用的畫布創建一個速度表表針超時（）工作，並且工作正常與一個canvas標籤HTML5畫布測速儀不需要與

我對針JavaScript是

function Speedometer(convas, score ,width_x, width_y ,height) 
    { 
    $('#Canvas_Exam').show(); 
     ctx = convas.getContext('2d'), 
     initialpoint = -90;   
     Target =-90 +180/100*score; 
     step = 1; 

    setInterval(function() { 
     if(Math.abs(Target - initialpoint) < step){ 
      initialpoint = Target; 
     }else{ 
      initialpoint += (Target > initialpoint) ? step : (Target < initialpoint) ? -step :0; 
     } 
     ctx.save(); 
     ctx.clearRect(0, 0, convas.width, convas.height); 
     ctx.translate(convas.width/2, convas.height/2+40); 
     ctx.rotate(initialpoint * Math.PI/180); 
     ctx.fillStyle = 'red'; 
     ctx.beginPath(); 
     ctx.moveTo(0,0); 
     ctx.lineTo(-width_x, -width_y); 
     ctx.lineTo(0, -height); 
     ctx.lineTo(width_x,- width_y); 
     ctx.lineTo(0,0); 
     ctx.fill(); 

     ctx.restore(); 
     },50); 
    }

和

var convas1 = document.getElementById('Canvas_Exam'); 
      Speedometer(convas1 ,data.d*10 ,4,12,65);

，但是當我使用第二畫布標籤一樣，

var convas2 = document.getElementById('Canvas_Course'); 
      Speedometer(convas2 ,data.d*10 ,4,12,65);

針僅在Canvas_Course而不是Canvas_Exam中可見。我認爲我在針的位置犯了錯誤。

任何人都可以提出我要做的事情。針對兩個畫布標籤中的針頭顯示

來源

2013-05-16 DurGesh kuMar RAO

您有全局變量問題正在進行。在該函數內部聲明的每個變量都是全局變量。 'var'不是可選的。 – epascarello

對不起，我沒有使用全局變量，我在函數中使用變量，我將函數作爲參數傳遞。 –

Thanku sir。現在它正在工作，非常感謝。 –

在變量前添加一個var以使它們變爲私密。

function Speedometer(convas, score ,width_x, width_y ,height) { 

    $('#Canvas_Exam').show(); 
    var ctx = convas.getContext('2d'), 
     initialpoint = -90;   
     Target =-90 +180/100*score; 
     step = 1; 

// rest of your function 

}

現在爲每個車速表初始化一個新的對象。

var convas1 = document.getElementById('Canvas_Exam'); 
var convas1Speedo = new Speedometer(convas1 ,data.d*10 ,4,12,65); 

var convas2 = document.getElementById('Canvas_Course'); 
var convas2Speedo = new Speedometer(convas2 ,data.d*10 ,4,12,65);

來源

2013-05-16 12:22:16

HTML5畫布測速儀不需要與

回答

相關問題