h5canvas绘制图片不显示
程序员文章站
2022-05-25 21:17:28
...
h5canvas绘制图片不显示
使用H5的canvas标签绘图，直接创建img指定src有时会由于加载图片慢，drawImage 后导致图片不显示如下：
```javascript
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var medicImg = new Image();
medicImg.src='../images/nh.png';
cxt.drawImage(medicImg, 25, 70,20,20);
cxt.fillText(data.transportUserName,50,85);
](https://img-blog.csdnimg.cn/20191115170928791.png)
解决：由于js是在加载完页面后执行，在使用canvas时，可以先将需要展示的图片以隐藏的形式先加载到页面，绘制canvas时就不会加载不到图片。
```javascript
<body>
<canvas id="myCanvas" width="600" height="300" style="align:center"></canvas>
<!--<img hidden="hidden" src="../images/nh.png">-->
<!--<img hidden="hidden" src="../images/gabbage.jpg">-->
<!--<img hidden="hidden" src="../images/wasteCar.png">-->
<!--<img hidden="hidden" src="../images/house.png">-->
<!--<img hidden="hidden" src="../images/transportCar.png">-->
<!--<img hidden="hidden" src="../images/factory.png">-->
</body>
下一篇： 窗口上绘制图像不显示问题