图像未出现在github页面上

Question

我写了一个简单的HTML文件，将图像放在画布上。 它在localhost上运行，但不在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>

这是一个不起作用的链接： 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/之外提供的

图像未出现在github页面上

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-06-09 02:38:40

图像未出现在github页面上

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-06-09 02:38:40

解决方案1
1 已采纳 2016-06-09 02:38:40