<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)

})

问题1：canvas绘制图片加载不出来的更多相关文章

  1. 使用HTML5 canvas做地图（3）图片加载平移放大缩小

    终于开始可以写代码了,手都开始痒了.这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作 ...

  2. touchweb手机网站图片加载方法（canvas加载和延迟加载）

    一.canvas图片加载 关于canvas加载,我的方法是,将文章中所有用到图片的地方,都用canvas代替,给canvas一个data-src,里面存放img的路径,通过canvas方法渲染图片.因 ...

  3. HTML5_canvas_图片加载_双缓冲_跳帧闪烁问题

    canvas 图片加载 pen.drawImage(ele, showX, showY, imgWidth, imgHeight); ele    将 img 元素 加载到画布上 步骤 1. 创建一个 ...

  4. canvas绘制图片

    canvas保存为data:image扩展功能的实现 [已知]canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image.目前支持的最好的是png格式, ...

  5. Android图片加载框架最全解析（五），Glide强大的图片变换功能

    大家好,又到了学习Glide的时间了.前段时间由于项目开发紧张,再加上后来又生病了,所以停更了一个月,不过现在终于又可以恢复正常更新了.今天是这个系列的第五篇文章,在前面四篇文章的当中,我们已经学习了 ...

  6. HTML5 Canvas 绘制图片不显示的问题

    问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~ 我按照流水线工程铺设以下几 ...

  7. 强大的图片加载框架Fresco的使用

    前面在卓新科技有限公司实习的时候,在自己的爱吖头条APP中,在图片异步加载的时候和ListView的滑动中,总会出现卡顿,这是因为图片的缓存做的不是足够到位,在项目监理的帮助下,有使用Xutils框架 ...

  8. Android之图片加载框架Fresco基本使用(二)

    PS:最近看到很多人都开始写年终总结了,时间过得飞快,又到年底了,又老了一岁. 学习内容: 1.进度条 2.缩放 3.ControllerBuilder,ControllerListener,Post ...

  9. Android之图片加载框架Fresco基本使用(一)

    PS:Fresco这个框架出的有一阵子了,也是现在非常火的一款图片加载框架.听说内部实现的挺牛逼的,虽然自己还没研究原理.不过先学了一下基本的功能,感受了一下这个框架的强大之处.本篇只说一下在xml中 ...

随机推荐

  1. PHP 使用非对称加密算法（RSA）

    解释: 非对称加密算法需要两个密钥:公开密钥(publickey)和私有密钥(privatekey).公开密钥与私有密钥是一对,如果用公开密钥对数据进行加密,只有用对应的私有密钥才能解密:如果用私有密 ...

  2. JeeWx捷微3.1小程序版本发布，支持微信公众号，微信企业号，支付窗——JAVA版开源微信管家

    支持小程序,JeeWx捷微3.1小程序版本发布^_^ JeeWx捷微V3.1——多触点小程序版本管理平台(支持微信公众号,微信企业号,支付窗)   JeeWx捷微V3.1.0版本紧跟微信小程序更新,在 ...

  3. day25-面向对象结构与成员

    1.面向对象结构分析 如下面的图所示:面向对象整体大致分两块区域: 每个大区域又可以分为多个小部分: class A: name = 'Tom' # 静态变量(静态字段) __iphone = '13 ...

  4. APP-4-百度地图定位

    APP-3-百度地图应用 需要根据上一步完成百度地图应用的测试,本文介绍Hbuilder通过MUI框架完成百度地图的定位. 1.代码部分 <!DOCTYPE html> <html& ...

  5. 【366】通过 python 求解 QP 问题

    参考: 9.3 凸优化 · 如何在 Python 中利用 CVXOPT 求解二次规划问题 参考: Quadratic Programming - Official website 步骤如下: 首先安装 ...

  6. 关于AVAYA CM6和Asterisk(Freepbx)对接的笔记

    最重要的两份参考文档: http://blog.sina.com.cn/s/blog_6db134880102vipo.html https://personalprojects.wordpress. ...

  7. 创建DLL动态链接库——模块定义法(def)

    DLL模块定义法(Module-Definition File,即DEF):在VS家族IDE中,根据提示新增.def文件,如下: LIBRARY 关键字; mytestDll 库名; DLL_ADD ...

  8. Ubuntu 下 redmine 安装配置

    安装 rvm \curl -L https://get.rvm.io | bash -s stable --ruby --autolibs=enable –auto-dotfiles 安装 Ruby ...

  9. zabbix 监控端口

    监控HTTPD端口的shell #!/bin/bash #2019年4月19日18:: ####### httpd=` netstat -tnlp|grep httpd|awk '{print $4} ...

  10. Spring Boot 邮件配置

    ######################################################## spring boot mail tls ###################### ...