图片未出现在 github 个页面上

Question

我写了一个简单的 HTML 文件来将图像放入 canvas。它在本地主机上运行，但不在 github 页中运行。

图像 starry-night.jpg 在同一文件夹中。

<!DOCTYPE html>
<meta charset="utf-8">
<body>

<canvas id="vincent"></canvas>

<script>

        var width  = 960;
        var height = 500;
        var canvas = document.getElementById('vincent');
        var ctx = canvas.getContext("2d");
        canvas.width  = width;
        canvas.height = height;

        var image = new Image();
        image.src= "starry-night.jpg";
        ctx.drawImage(image, 0, 0);

        console.log("done");

</script>

</body>

这里有一个 link 它不起作用：http://monsieurcactus.github.io/LearnElm/canvas-example.html

这里有一个片段也不起作用：

        var width  = 960;
        var height = 500;
        var canvas = document.getElementById('vincent');
        var ctx = canvas.getContext("2d");
        canvas.width  = width;
        canvas.height = height;

        var image = new Image();
        image.src= "http://monsieurcactus.github.io/LearnElm/starry-night.jpg";
        ctx.drawImage(image, 0, 0);

        console.log("done");

<canvas id="vincent"></canvas>

Answer 1

使用 src 属性设置图像源 使浏览器触发获取图像的 HTTP 请求，并且 您需要等待图像加载 才能绘制它。像这样：

<!DOCTYPE html>
<meta charset="utf-8">
<body>

<canvas id="vincent"></canvas>

<script>

    var width  = 960;
    var height = 500;
    var canvas = document.getElementById('vincent');
    var ctx = canvas.getContext("2d");
    canvas.width  = width;
    canvas.height = height;

    var image = new Image();
    image.src= "http://monsieurcactus.github.io/LearnElm/starry-night.jpg";

    image.onload = function() {
         ctx.drawImage(image, 0, 0);
         console.log("done");
    }

</script>

</body>

注意：这里我们需要一个绝对 url 因为这个例子是在 monsieurcactus.github.io/LearnElm/[=11 之外提供的=]

图片未出现在 github 个页面上

image does not appear on github pages

html

javascript

github-pages