Javascript 改变元素'；使用脚本创建维度

我有一个脚本，可以将图像渲染到画布上下文中。我想更改画布的宽度以匹配图像的尺寸。我使用以下脚本执行此操作：

var c = document.getElementById("c");
var ctx = c.getContext("2d");
function loadImage(url){
    var img = new Image();
    img.src = url;
    return img;
};
var image = loadImage("images/bird.png");
c.width = image.width + "px";
c.height = image.height + "px";
{...}

---

但是，画布的尺寸设置为“0”，即使我进入控制台并键入

c.width=“10px”

或这些行周围的内容。

我想您希望图像的尺寸同步可用，但在异步加载图像之前，它们是不可用的。看

您将需要以下内容：

function loadImage(url, canvas) {
    var img = new Image();
    img.src = url;
    // Set a callback function to run when the
    // image is loaded
    img.onload = function() {
        canvas.width = img.width + "px";
        canvas.height = img.height + "px";
    }
};

loadImage("images/bird.png");

---

请注意，

canvas.width

与

canvas.style.width

不同。确保您正在设置要设置的。（您可能需要同时设置两者）。@James Thorpe我知道这一点，使用

canvas.style.width

不会更改画布的纵横比，而

canvas.width

会更改画布的纵横比。你试过没有

+“px”

的吗？我相信

宽度

/

高度

属性可能不需要它。可能是它将其设置为0，因为它认为

.px

无效。请尝试删除

+“px”

画布的值。宽度/高度不应包含单位+nrabinowitz在回答中所说的单位。