使用脚本

Question

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

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";
{...}

然而，画布＆＃39;即使我进入控制台并键入c.width = "10px"或这些行周围的某些内容，维度也设置为＆＃34; 0＆＃34 ;.

Answer 1

我认为您希望image维度可以同步使用，但在图像以异步方式加载之前，它们将无法使用。见Getting an image dimensions

你想要的东西如下：

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