drawImage（）不適用於畫布

Question

這是下面的代碼，我無法弄清楚自己在做什么。 當我預覽它時，圖像不存在，只有畫布邊框。

<!DOCTYPE html>

<html>
<head>
  <meta charset="UTF-8">  
    <title>Page Title</title>
</head>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

<body>

<script>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sticky = new Image();
sticky.src = "sticky.png";
sticky.onload = function() {
context.drawImage(sticky, 0, 0);
};

</script>

</body>
</html>

Answer 1

控制台將顯示您文件的鏈接。 看那里，如果正確

也許您必須等到圖像加載后才能繪制圖像。 嘗試以下方法：

  var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); make_base(); function make_base() { base_image = new Image(); base_image.src = 'http://techtastico.com/files/2014/06/Apple-Swift-Logo.png'; base_image.onload = function(){ context.drawImage(base_image, 0, 0); }; }

  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

drawImage（）不適用於畫布

問題描述

1 個解決方案

解決方案1
0 已采納 2014-10-01 20:57:46

drawImage（）不適用於畫布

問題描述

1 個解決方案

解決方案1 0 已采納 2014-10-01 20:57:46

解決方案1
0 已采納 2014-10-01 20:57:46