我想绘制两个canvas图片,结果只有后面那个绘制成功
时间: 2023-08-10 17:21:19 浏览: 52
这可能是因为你在绘制第一个 canvas 图片时没有等待图片加载完成,就立即开始绘制第二个 canvas 图片,导致第一个 canvas 图片没有绘制成功。
为了解决这个问题,你应该在绘制每个 canvas 图片之前先确保图片已经加载完成。可以使用 `Image` 对象的 `onload` 事件来检测图片是否已经加载完成。在 `onload` 事件中,你可以开始绘制 canvas 图片。
以下是一个示例代码:
```javascript
// 创建两个 canvas 元素
var canvas1 = document.createElement('canvas');
var canvas2 = document.createElement('canvas');
// 获取 canvas 上下文
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
// 创建两个 Image 对象
var img1 = new Image();
var img2 = new Image();
// 设置 Image 对象的 src 属性
img1.src = 'path/to/image1.jpg';
img2.src = 'path/to/image2.jpg';
// 等待图片加载完成后开始绘制 canvas 图片
img1.onload = function() {
canvas1.width = img1.width;
canvas1.height = img1.height;
ctx1.drawImage(img1, 0, 0);
}
img2.onload = function() {
canvas2.width = img2.width;
canvas2.height = img2.height;
ctx2.drawImage(img2, 0, 0);
}
// 将 canvas 添加到页面中
document.body.appendChild(canvas1);
document.body.appendChild(canvas2);
```
在这个示例中,我们创建了两个 canvas 元素和两个 Image 对象。然后,我们设置 Image 对象的 src 属性,并在 `onload` 事件中开始绘制对应的 canvas 图片。最后,我们将 canvas 添加到页面中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)