Javascript 只要我用一次，画画布就行

我画了一个画布，并根据一个值旋转它，如果我在一个页面上使用画布一次，它就会工作

如果我第二次将其添加到页面，只会绘制最后一个，我在代码中找不到错误，也不会得到js错误

我认为问题在于下一个函数：

function animate(){ 

function drawnumbers()
{context.save(); 
context.fillStyle = "#000000"; 
context.translate(73,0); 
context.font="10px Orbitron"; 
context.textAlign = "center"; 
context.rotate(((i*(180/min)))*Math.PI/180); 
context.fillText(data.values[i].amount,0,3); 
context.restore(); 
}; 
if (d < defer){ 
context.clearRect(0,0,400,400); 
d++; 

context.save(); 
var ang = ((((d-minn)*(180/angle)))*(Math.PI/180)); 
context.translate(38,39); 
context.scale(.8,.8); 
base_image = new Image(); 

base_image.src = 'http://oi44.tinypic.com/2hfkx8p.jpg'; 
context.translate(base_image.width/2, base_image.height/2); 
context.rotate(ang ); 
context.drawImage(base_image, -base_image.width/2, -base_image.height/2); 
context.restore(); 

context.save();
context.beginPath(); 
context.arc(100,100,64,1*Math.PI,2*Math.PI, false); 
context.lineWidth = .4; 
context.strokeStyle="#00A1DE"; 
context.globalAlpha = 0.7; 
context.stroke(); 
context.restore(); 

context.save(); 
context.translate(100,100); 
context.rotate(Math.PI/180); 
context.strokeStyle = "#00A1DE"; 
context.lineWidth = .7; 
for (var i=0;i < data.values.length; i++){ 
context.beginPath(); 
context.moveTo(62,0); 
context.lineTo(67,0); 
context.stroke(); 
context.globalAlpha = 0.7; 
drawnumbers(); 
context.rotate((182/(min))*(-Math.PI/180)); 
} 
context.restore(); 

context.fillStyle="white"; 
context.fillRect(38,101,123,75); 

context.save(); 
context.fillStyle = "#00a1de"; 
context.font = "22px Orbitron"; 
context.textAlign = "center"; 
context.fillText(defer, 100, 90); 
context.restore(); 

context.save(); 
context.fillStyle = "#000000"; 
context.font = "10px arial"; 
context.textAlign = "center"; 
context.fillText(eenheid, 100, 115); 
context.restore(); 

} 
else 
{ 
clearTimeout(t); 
}; 
t=setTimeout("animate()",30-d); 
}; 

我在一个函数中使用了它，但它仍然存在相同的问题，所以我认为我的代码有问题

---

有人能看到我没有看到的问题吗？

您的代码太复杂了，尤其是因为没有充分的理由来解释这种复杂性。
复制一个大的（>200）行代码块来复制一个功能很容易出错。
重构代码后，您将能够很容易地看到问题。
只是一些提示：

• 非常简单的一个：美化代码
• 无冗余：如果一个代码在这里存在两次或两次以上，则生成一个函数并进行因式分解
• 把代码分解成更小的部分。例如：drawText（上下文、文本、x、y、字体）（打印字体和延迟）、DrawNumber（上下文）、drawRotatingImage（上下文、角度）等等
• 每次开始使用closePath（）
• 在页面加载时加载一次图像，并在设置动画之前等待加载
• 不要在循环中定义函数（DrawNumber）
• 使用单个对象存储多个参数（上下文、角度等），或 甚至切换到面向对象的样式
• 只有一个animate（）循环，如果需要，它将调用多个draw（…）函数

在所有这些之后，您的代码看起来会简单得多，bug应该会很快消失

我用小提琴做了这项工作（部分）： （编辑）

代码如下所示：

// parameters : settings for one gauge display
var parameters1 = {
    data: data,
    defer: '520',
    context: context,
    left: 38,
    top: 30,
    d: 0,
    angle: 0,
    scale: 0.8,
    //... whatever parameter here
};
var parameters2 = ... ;

将绘图拆分为多个函数，以便更容易理解：

// draws a gauge
function drawGauge(param) {
    preDraw(param);
    drawBaseImage(param);
    drawArc(param);
    drawTheNumbers(param);
    writeDefer(param);
    writeEenheid(param);
    postDraw(param);
}

// translate and scales context, and updates some values for the gauge
function preDraw(param) {
    var minn = param.data.values[param.data.values.length - 1].amount;
    var maxn = data.values[0].amount;
    var angle = maxn - minn;
    var d = param.d;
    param.ang = ((((d - minn) * (180 / angle))) * (Math.PI / 180));
    var ctx = param.context;
    ctx.save();
    ctx.translate(param.left, param.top);
    ctx.scale(param.scale, param.scale);
    context.fillStyle = "white";
    context.fillRect(0, 60, 123, 75);
}

// restore context
function postDraw(param) {
    var ctx = param.context;
    ctx.restore();
    param.d++;
}

function drawBaseImage(param) {
    var ctx = param.context;
    var ang = param.ang;
    ctx.save();
    ctx.translate(base_image.width / 2, base_image.height / 2);
    ctx.rotate(ang);
    ctx.drawImage(base_image, -base_image.width / 2, -base_image.height / 2);
    ctx.restore();
}

function drawArc(param) {
    var ctx = param.context;
    ctx.save();
    ctx.beginPath();
    ctx.arc(base_image.width / 2, base_image.height / 2, 64, 1 * Math.PI, 2 * Math.PI, false);
    ctx.lineWidth = .4;
    ctx.strokeStyle = "#00A1DE";
    ctx.globalAlpha = 10.7;
    ctx.stroke();
    ctx.restore();
}

function writeDefer(param) {
    var ctx = param.context;
    var defer = param.defer;
    ctx.save();
    ctx.fillStyle = "#00a1de";
    ctx.font = "22px Orbitron";
    ctx.textAlign = "center";
    ctx.fillText(defer, base_image.width / 2, base_image.height / 2);
    ctx.restore();
}

function writeEenheid(param) {
    var ctx = param.context;
    ctx.save();
    ctx.fillStyle = "#000000";
    ctx.font = "10px arial";
    ctx.textAlign = "center";
    ctx.fillText(eenheid, base_image.width / 2, base_image.height / 2 + 20);
    ctx.restore();
}

function drawTheNumbers(param) {
    var ctx = param.context;
    var dataValues = param.data.values;
    var count = dataValues.length;
    ctx.save();
    ctx.translate(base_image.width / 2, base_image.height / 2);
    ctx.rotate(Math.PI / 180);
    ctx.strokeStyle = "#00A1DE";
    ctx.lineWidth = .7;
    ctx.fillStyle = "#000000";
    ctx.font = "10px Orbitron";
    ctx.textAlign = "center";
    ctx.globalAlpha = 0.7;
    for (var i = 0; i < count; i++) {
        ctx.beginPath();
        ctx.moveTo(62, 0);
        ctx.lineTo(67, 0);
        ctx.stroke();
        ctx.closePath();
        ctx.fillText(dataValues[i].amount, 60, 3);
        ctx.rotate(-Math.PI / count);
    }
    context.restore();
}

---

你让它在垃圾箱里工作了吗？我试了两天，但每次都会出现不同的错误，比如函数没有定义等等。没有，我没有碰垃圾箱。我只是看了一下，然后提出了一种组织代码的新方法。任何人都可以更改jsbin，除非被锁定，所以在发布之前一定要锁定它，或者使用JSFIDLE（它有一个“更新”按钮）。我是一个初学者，我理解你所说的一半，你在不同的功能中做每件事。但你不能告诉我你会怎么做，因为我得到了理论，但我不知道怎么做，所以这是我的版本。。。我做到了这一步：但这仍然不起作用，我知道你要去哪里！我将尝试更改函数，以便让它按我所希望的方式工作。。（一半，不要整天兜圈子：P）不客气+1和/或如果有用，则接受。事实上，实现这一点的“最佳”方法是使用类，这样每个gauge对象都有自己的属性集，并且语法变得更清晰（gauge1.draw（）。但我没上过课，因为我不知道你们是否能轻松应对。

// draws a gauge
function drawGauge(param) {
    preDraw(param);
    drawBaseImage(param);
    drawArc(param);
    drawTheNumbers(param);
    writeDefer(param);
    writeEenheid(param);
    postDraw(param);
}

// translate and scales context, and updates some values for the gauge
function preDraw(param) {
    var minn = param.data.values[param.data.values.length - 1].amount;
    var maxn = data.values[0].amount;
    var angle = maxn - minn;
    var d = param.d;
    param.ang = ((((d - minn) * (180 / angle))) * (Math.PI / 180));
    var ctx = param.context;
    ctx.save();
    ctx.translate(param.left, param.top);
    ctx.scale(param.scale, param.scale);
    context.fillStyle = "white";
    context.fillRect(0, 60, 123, 75);
}

// restore context
function postDraw(param) {
    var ctx = param.context;
    ctx.restore();
    param.d++;
}

function drawBaseImage(param) {
    var ctx = param.context;
    var ang = param.ang;
    ctx.save();
    ctx.translate(base_image.width / 2, base_image.height / 2);
    ctx.rotate(ang);
    ctx.drawImage(base_image, -base_image.width / 2, -base_image.height / 2);
    ctx.restore();
}

function drawArc(param) {
    var ctx = param.context;
    ctx.save();
    ctx.beginPath();
    ctx.arc(base_image.width / 2, base_image.height / 2, 64, 1 * Math.PI, 2 * Math.PI, false);
    ctx.lineWidth = .4;
    ctx.strokeStyle = "#00A1DE";
    ctx.globalAlpha = 10.7;
    ctx.stroke();
    ctx.restore();
}

function writeDefer(param) {
    var ctx = param.context;
    var defer = param.defer;
    ctx.save();
    ctx.fillStyle = "#00a1de";
    ctx.font = "22px Orbitron";
    ctx.textAlign = "center";
    ctx.fillText(defer, base_image.width / 2, base_image.height / 2);
    ctx.restore();
}

function writeEenheid(param) {
    var ctx = param.context;
    ctx.save();
    ctx.fillStyle = "#000000";
    ctx.font = "10px arial";
    ctx.textAlign = "center";
    ctx.fillText(eenheid, base_image.width / 2, base_image.height / 2 + 20);
    ctx.restore();
}

function drawTheNumbers(param) {
    var ctx = param.context;
    var dataValues = param.data.values;
    var count = dataValues.length;
    ctx.save();
    ctx.translate(base_image.width / 2, base_image.height / 2);
    ctx.rotate(Math.PI / 180);
    ctx.strokeStyle = "#00A1DE";
    ctx.lineWidth = .7;
    ctx.fillStyle = "#000000";
    ctx.font = "10px Orbitron";
    ctx.textAlign = "center";
    ctx.globalAlpha = 0.7;
    for (var i = 0; i < count; i++) {
        ctx.beginPath();
        ctx.moveTo(62, 0);
        ctx.lineTo(67, 0);
        ctx.stroke();
        ctx.closePath();
        ctx.fillText(dataValues[i].amount, 60, 3);
        ctx.rotate(-Math.PI / count);
    }
    context.restore();
}

function animate() {
    context.clearRect(0, 0, canvasWidth, canvasHeight);
    drawGauge(parameters1);
    drawGauge(parameters2);
    setTimeout(animate, 15);
};
base_image.onload = animate();