问题1:canvas绘制图片加载不出来
<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绘制图片加载不出来的更多相关文章
- 使用HTML5 canvas做地图(3)图片加载平移放大缩小
终于开始可以写代码了,手都开始痒了.这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作 ...
- touchweb手机网站图片加载方法(canvas加载和延迟加载)
一.canvas图片加载 关于canvas加载,我的方法是,将文章中所有用到图片的地方,都用canvas代替,给canvas一个data-src,里面存放img的路径,通过canvas方法渲染图片.因 ...
- HTML5_canvas_图片加载_双缓冲_跳帧闪烁问题
canvas 图片加载 pen.drawImage(ele, showX, showY, imgWidth, imgHeight); ele 将 img 元素 加载到画布上 步骤 1. 创建一个 ...
- canvas绘制图片
canvas保存为data:image扩展功能的实现 [已知]canvas提供了toDataURL的接口,可以方便的将canvas画布转化成base64编码的image.目前支持的最好的是png格式, ...
- Android图片加载框架最全解析(五),Glide强大的图片变换功能
大家好,又到了学习Glide的时间了.前段时间由于项目开发紧张,再加上后来又生病了,所以停更了一个月,不过现在终于又可以恢复正常更新了.今天是这个系列的第五篇文章,在前面四篇文章的当中,我们已经学习了 ...
- HTML5 Canvas 绘制图片不显示的问题
问题: 慕名赶来,却一脚踩空,低头一看,地上一个大坑. 事情是这样的,在我看完w3c的介绍和很有说服力和教学力的demo后,本着实践出真知的思想决定上手一试,这一试不要紧~ 我按照流水线工程铺设以下几 ...
- 强大的图片加载框架Fresco的使用
前面在卓新科技有限公司实习的时候,在自己的爱吖头条APP中,在图片异步加载的时候和ListView的滑动中,总会出现卡顿,这是因为图片的缓存做的不是足够到位,在项目监理的帮助下,有使用Xutils框架 ...
- Android之图片加载框架Fresco基本使用(二)
PS:最近看到很多人都开始写年终总结了,时间过得飞快,又到年底了,又老了一岁. 学习内容: 1.进度条 2.缩放 3.ControllerBuilder,ControllerListener,Post ...
- Android之图片加载框架Fresco基本使用(一)
PS:Fresco这个框架出的有一阵子了,也是现在非常火的一款图片加载框架.听说内部实现的挺牛逼的,虽然自己还没研究原理.不过先学了一下基本的功能,感受了一下这个框架的强大之处.本篇只说一下在xml中 ...
随机推荐
- sql server 语法 MSDN
https://docs.microsoft.com/en-us/sql/t-sql/statements/create-view-transact-sql
- AS3 - 对文件和目录的操作
1,写入到文件 1 2 3 4 5 var fileObj:File = File.documentsDirectory.resolvePath("hangge.txt"); va ...
- 尚硅谷springboot学习12-profile
一个项目对应不同的环境可以会有不同的配置,如开发,测试,生产环境使用不同的端口,这时可以设置profile变换不同的环境 通过spring.profiles.active切换环境 1.多Profile ...
- 尚硅谷redis学习2-redis的安装和HelloWorld
Reids: remote dictionary server redis特点:支持持久化,支持复杂数据类型,支持备份 下载: 解压: 执行make, make install 可能会需要安装make ...
- 用crash来分析一下proc的文件访问
一般来说,用户通过fd的传入,调用open系统调用,来获取fd,然后read的时候,通过这个fd来查找对应的file* SYSCALL_DEFINE3(open, const char __user ...
- Unity3D之Lightmap详解
作者:李志健 Unity 完全集成了光照贴图,可以通过编辑器创建完整的光照贴图,你完全不用担心,所有材质会自动获得光照贴图.光照贴图的意思是,所有灯光的特性将被直接映射到Beast lightmapp ...
- Java8 Optional的简单操作
我们经常会遇到这种情况:首先判断一个对象是否为null,如果不为null,获取一个对象中的一个属性,如果该属性不为null,又获取该属性的属性,如果该属性的属性不为null,又获取属性的属性的属性: ...
- linux配置虚拟主机
linux 下怎么配置虚拟主机 linux 下怎么配置虚拟主机,在网上找到N个资料都是高手们随便说几句,都没怎么说清楚.问题: 我把域名(bs.jxiop.com)指向了 68.10.140.10 ...
- MATLAB二维相机标定的解决方案 calibration
第一步,在命令行下面输入cameraCalibrator,启动MATLAB相机标定.相机矫正界面 cameraCalibrator 第二步:拍照.如果你是做相机标定,你应该知道,你需要一些calibr ...
- 只需两步获取任何微信小程序源码
http://baijiahao.baidu.com/s?id=1601969343738344659&wfr=spider&for=pc