drawImage在canvas上有奇怪的纵横比在firefox等问题

问题描述

我正在运行firefox 3.5.6。

I am running firefox 3.5.6.

我想在画布上显示一个图像，并在其上绘制几行。它需要在firefox和Internet Explorer中正确显示（使用excanvas）。

I want to display an image on a canvas and draw a couple lines on it. It needs to display properly in firefox and internet explorer (using excanvas).

这是我得到的：

顶部的图片是我在IE8看到的，底部是我在firefox看到的。

The top image is what I see in IE8, the bottom is what I see in firefox.

IE似乎有点搞砸了，因为画布是错误的大小，但firefox是疯了！什么给这个长宽比？为什么我的弧的下半部不出现？

IE seems to be a bit messed up as far as the canvas is the wrong size but firefox is going crazy! What gives with this aspect ratio? Why does the second half of my arc not appear?Also, some times firefox just flat out doesn't show anything.

。它实际上应该抛出一个 INDEX_SIZE_ERR 异常，但Firefox似乎忽略了该调用。

The simpleArc function doesn't work in Firefox when the amplitude is negative. The problem is that a negative amplitude results in a negative radius for the arc, which is illegal according to the canvas spec. It should actually throw an INDEX_SIZE_ERR exception, but Firefox just seems to ignore the call.

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

There are two possible solutions (basically; there are several ways you could accomplish either): when you pass a negative amplitude, either calculate the parameters for the arc taking into account the negative radius (with a different center point and angles, etc.), or change the sign and use transformations to rotate the arc. I implemented the second solution like this:

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;
}

Firefox不显示任何内容

在您的代码中，您创建图像并设置源代码，但在执行代码的其余部分之前可能无法加载。图像异步加载，当您将图像绘制到画布上时，它不会等待它完成。您需要使用 onload 事件调用使用图片的代码。

Firefox not showing anything

In your code, you create the image and set the source, but it may not be loaded before the rest of the code get's executed. The image loads asynchronously, and when you draw the image onto the canvas, it doesn't wait for it to finish. You will need to call the code that uses the image from an onload event.

var img = $('<img>');
img[0].onload = function() {
    ctx.drawImage(img[0], 0, 0);
    ctx.strokeStyle = "blue";
    ctx.simpleStroke(function(ctx) { ctx.simpleArc(0, 70, img_w/2, 3)});
    ctx.simpleStroke(function(ctx) { ctx.simpleArc(img_w / 2, 70, img_w/2, -3)});
};

// I moved this so it happens after you set the `onload` event, because I
// think IE won't call `onload` if it happens to already be loaded.
img.attr('src', 'shortcylinder.png');

您还可以预加载所有需要的图像，而不是在需要时创建它们。您仍然需要防止代码运行，直到加载所有图片。

You could also pre-load all the images you will need instead of creating them when you need them. You would still need to prevent the code from running until all the images are loaded.

这篇关于drawImage在canvas上有奇怪的纵横比在firefox等问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！