问题1：canvas绘制图片加载不出来

HTML与JS画布绘图技巧

最新推荐文章于 2022-11-18 16:48:35 发布

weixin_34337265

最新推荐文章于 2022-11-18 16:48:35 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/duanzhenzhen/p/10109449.html

本文介绍如何使用HTML的canvas元素结合JavaScript进行图片的加载与绘制，探讨解决图片加载延迟导致无法正常显示的问题，提供两种解决方案并附带代码示例。

<head>
　　<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--创建画布-->
<canvas id="myCanvas" height="100px" width="100px"></canvas>
</body>

/*此处window.onload解决HTML页面完成后再执行js代码*/
window.onload = function(){
    var myCanvas = document.getElementById("myCanvas");
    var ctx = myCanvas.getContext("2d");
    var pic = new Image();
    pic.src = "图片地址";/*地址要填相对HTML文件的地址*/
    pic.onload = function(){//等图片加载完成后再绘制
         ctx.drawImage(pic,0,0,width,height);
    }  
}

加载图片需要时间，不写pic.onload 会导致图片加载不出来；

当然还有另外一种方法解决加载问题：init()方法中加载图片，将绘制方法放到定时器中，设置一定的等待时间，之前尝试10ms,网速较慢，偶尔还是会加载不出来部分图片，索性设置为50ms,多次测试没有加载问题

$(function(){
    init();
    //使用定时器，规定50ms后再绘制，主要是要先让初始化方法中的图片都加载完成，替代了img.onload方法
    setTimeout(function(){
        drawBackground();
        seeweed.draw();
        fruit.draw();
    },50)
})

转载于:https://www.cnblogs.com/duanzhenzhen/p/10109449.html