Question

我正在尝试将图像放在canvas元素中。我的代码如下。当我执行它时，我没有收到任何错误，只是一个页面，其中包含画布边框区域的轮廓。请问有人可以告诉我哪里出错了吗？

html代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title> </title>
 <link rel='stylesheet' href="crop_pic.css">
 </head>

 <body>
 <div>
 <canvas id="panel" width="380" height="380"></canvas>

 </div>
 </body>

 <script src=crop_pic.js></script>  

 </html>

的javascript：

window.onload = function(){
var canvas = document.getElementById('panel');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'storage/resized_Glong.jpg';

ctx.drawImage(img,0,0);

}

的CSS：

 #panel{
border: 1px solid #000;

}

Answer 1

在脚本代码中使用引号
```
<script src='crop_pic.js'></script>  
```

等到图像加载完毕后再将其绘制到画布上。为此添加一个事件监听器。

window.onload = function() {
var canvas = document.getElementById('panel');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'storage/resized_Glong.jpg';
img.addEventListener('load', function() {
    ctx.drawImage(img, 0, 0);
});
}

无法在画布中放置图像

1 个答案: