Canvas-drawImage无法绘图，出现空白的解决办法

最新推荐文章于 2023-04-12 15:10:32 发布

莫兮是我

最新推荐文章于 2023-04-12 15:10:32 发布

阅读量7.1k

点赞数 1

分类专栏：前端 WEB 文章标签： canvas html

本文链接：https://blog.csdn.net/u013362192/article/details/113922101

版权

前端同时被 2 个专栏收录

67 篇文章 0 订阅

订阅专栏

WEB

50 篇文章 1 订阅

订阅专栏

文章目录

问题剖析
解决办法
- 例子代码
测试样例

问题剖析

在操作drawImage()函数时，经常会出现调取正常，但canvas绘制出现空白的情况：

在这里插入图片描述

这种情况，原因可以归为：

浏览器在加载图片时，图片尚未加载完毕，便开始绘图
主要原因为：drawImage()为异步函数

解决办法

drawImage()函数，要等到img标签里指定的图像加载完成后，再开始绘图，否则会出现无图的情况
可以声明两种加载方式：
1. img.onload = function() {drawImage()}
2. window.onload = function() {drawImage()}
可以使用addEventListener('load', () => {drawImage()})，可以绘出图像
1. 同理：document.querySelector('#imgs').addEventListener('load', (event) => {drawImage()})

例子代码

 let img = document.getElementById('imgs');
        // 会加载出图片	
        img.addEventListener('load', ()=> {
            ctx.drawImage(img, 20, 20);
        });
        // 会加载出来图片
        img.onload = () => {
            ctx.drawImage(img, 20, 20);
        }

效果：
在这里插入图片描述

测试样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    img <br />
    <img id="imgs" width="240" height="240" src="../../img/show.jpg">
    <hr />
    canvas<br />
    <canvas id="canvas" width="500" height="350"></canvas>
    <script>
        let c = document.getElementById('canvas');
        let ctx = c.getContext('2d');

        let img = document.getElementById('imgs');
        // 会加载出图片
        img.addEventListener('load', () => {
            ctx.drawImage(img, 20, 20);
        });
        // 会加载出来图片
      /*   img.onload = () => {
            ctx.drawImage(img, 20, 20);
        } */
    </script>
</body>
</html>