画布上的drawImage在firefox和其他问题中具有奇怪的宽高比

Question

我正在运行firefox 3.5.6.

我想在画布上显示图像并在其上绘制几行.它需要在firefox和Internet Explorer中正确显示(使用excanvas).

这是我得到的:

顶部图像是我在IE8中看到的,底部是我在firefox中看到的.

IE看起来有点乱,因为画布的大小不对,但是firefox很疯狂!这个宽高比给出了什么？为什么我的弧的下半部分没有出现？此外,有些时候firefox刚出来并没有显示任何东西.

顺便说一句,这是我的代码.

Answer 1

宽高比问题

如果未在canvas元素上设置宽度,则默认为300x150.在CSS中,您将样式设置为94x120,因此它将图像缩放到该大小.要修复它,您需要在HTML中设置宽度和高度,或者使用JavaScript.

在HTML中:

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

在JavaScript中(使用jQuery):

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

Internet Explorer的大小不正确

将大小添加到canvas元素也应解决此问题.由于IE使用VML而不是画布来渲染图像,因此不适用画布的CSS规则.excanvas应该看到指定的大小并将其应用于IE.

缺少弧的下半部分

simpleArc当幅度为负时,该功能在Firefox中不起作用.问题是负幅度导致电弧的负半径,根据画布规范这是非法的.它实际上应该抛出INDEX_SIZE_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;
}

Firefox没有显示任何内容

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

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');

您还可以预先加载所需的所有图像,而不是在需要时创建它们.在加载所有图像之前,您仍然需要阻止代码运行.