drawImage在canvas上有奇怪的纵横比在firefox等问题 [英] drawImage on canvas has weird aspect ratio in firefox and other problems

问题描述

我正在运行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.

这是我的代码。

Here is my code by the way.

推荐答案

宽高比问题

如果不在 canvas 元素上设置宽度，则默认为300x150。在CSS中，您将样式设置为94x120，因此会将图片缩放为该大小。要修复它，您需要在HTML或JavaScript中设置宽度和高度。

Aspect ratio problem

If you don't set a width on the canvas element, it defaults to 300x150. In your CSS, you set the style to 94x120, so it scales the image to that size. To fix it, you need to either set the width and height in the HTML, or with JavaScript.

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

在JavaScript（含jQuery）中：

In JavaScript (with jQuery):

$('canvas').attr('width', '94').attr('height', '120');

Internet Explorer的大小不正确

size到canvas元素也应该解决这个问题。因为IE使用VML而不是canvas来渲染图像，所以canvas的CSS规则将不适用。

Internet Explorer's incorrect size

Adding the size to the canvas element should fix this problem too. Since IE is using VML instead of a canvas to render the image, the CSS rule for canvas won't apply. excanvas should see the specified size and apply it in IE.

simpleArc 函数在振幅为负值时在Firefox中不起作用。问题是负振幅导致弧的负半径，根据 canvas spec 。它实际上应该抛出一个 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等问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！