Javascript 画布上的drawImage在firefox中有奇怪的纵横比和其他问题

我正在运行firefox 3.5.6

我想在画布上显示一个图像，并在上面画几条线。它需要在firefox和internet explorer中正确显示（使用excanvas）

以下是我得到的：

上图是我在IE8中看到的，下图是我在firefox中看到的

IE看起来有点混乱，因为画布的大小不对，但firefox快疯了！这个纵横比有什么好处？为什么我的弧的后半部分不出现？ 而且，有些时候firefox完全没有显示任何内容

纵横比问题 如果未在

画布上设置宽度，则默认为300x150。在CSS中，您将样式设置为94x120，因此它会将图像缩放到该大小。要解决这个问题，您需要在HTML中或使用JavaScript设置宽度和高度

在HTML中：
Internet Explorer的大小不正确
将大小添加到canvas元素也可以解决此问题。由于IE使用VML而不是画布来渲染图像，因此画布的CSS规则将不适用。excanvas应看到指定的尺寸，并将其应用于IE中

错过了弧的后半部分
振幅为负时，
simpleArc
函数在Firefox中不起作用。问题是，负振幅会导致弧的半径为负，这是违法的。它实际上应该抛出一个
INDEX\u SIZE\u ERR
异常，但Firefox似乎忽略了这个调用

有两种可能的解决方案（基本上，有几种方法可以实现）：当传递负振幅时，计算圆弧的参数，同时考虑负半径（具有不同的中心点和角度等），或者更改符号并使用变换旋转圆弧。我实现了第二个解决方案，如下所示：

ctx.simpleArc = function(x,y, length, amplitude) {
    var rotate = false;

    // Check whether we need to rotate the image
    if (amplitude < 0) {
        rotate = true;
        amplitude = -amplitude;
    }
    var radius = amplitude/2+ length*length/(8*amplitude);
    var outerAngle = Math.asin((radius-amplitude)/radius);
    var innerAngle = Math.PI - 2*outerAngle;

    // The translate/rotate/translate steps could be combined into one matrix
    // transformation, but I think this is clearer and less error-prone.
    if (rotate) {
        this.save(); // So we can easily undo the transformation
        this.translate(x + length, y);
        this.rotate(Math.PI);
        this.translate(-length, -y);
    }
    this.arc(x+length/2, y+(radius-amplitude), radius, -(outerAngle+innerAngle), -outerAngle, false);

    // Reset the transformation matrix to its original value
    if (rotate) {
        this.restore();
    }
    return this;
}

您还可以预加载所有需要的图像，而不是在需要时创建它们。在加载所有图像之前，您仍然需要阻止代码运行。
我最近注意到，使用样式定义画布元素的宽度和高度会导致类似的问题。以前面的例子为例

这适用于FF 9.0.1 Mac

<canvas id="c" width="94" height="120">Ugh, this just ain't gonna work</canvas>

<canvas id="c" style="width:94;height:120;">Ugh, this just ain't gonna work</canvas>

呃，这行不通

vs

这与您的示例在FF 9.0.1 Mac中的显示问题类似

<canvas id="c" width="94" height="120">Ugh, this just ain't gonna work</canvas>

<canvas id="c" style="width:94;height:120;">Ugh, this just ain't gonna work</canvas>

呃，这行不通

---

也许就是这样吧？

嗯，是的，这适用于纵横比，但不适用于其他问题。具体地说，有时候什么都不画，当Firefox中只有一半的弧出现时，我忘记了其他问题。我将用解决方案更新答案。

<canvas id="c" style="width:94;height:120;">Ugh, this just ain't gonna work</canvas>