圖像未出現在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