drawImage（）不适用于画布

Question

here is my code below I can't figure out what I'm doing wrong. 这是下面的代码，我无法弄清楚自己在做什么。 when I preview it, the image isn't there, just the canvas border. 当我预览它时，图像不存在，只有画布边框。

<!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

the console displays the link to your file. 控制台将显示您文件的链接。 look there if the correct 看那里，如果正确

Maybe you should have to wait until the image is loaded before you draw it. 也许您必须等到图像加载后才能绘制图像。 Try this instead: 尝试以下方法：

  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