0

我已经使用画布创建了一个速度计针，并且使用一个画布标签可以正常工作

我的针 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' 中可见。我想我在针的位置上犯了错误。

任何人都可以建议我必须做什么。用于两个画布标签中的针显示

4

1 回答 1

0

在您的变量前面添加一个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-16T12:22:16.090 回答