问题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中 ...
随机推荐
- python 阿狸的进阶之路(6)
常用模块 json # 序列化 #将内存的数据存到硬盘中,中间的格式,可以被多种语言识别,跨平台交互数据 #json 可以将字典之类的数据类型存到字典中 import json dic = {&quo ...
- Linux查看当前系统的发行版信息
lsb_release命令用来查看当前系统的发行版信息(prints certain LSB (Linux Standard Base) and Distribution information.). ...
- 一个seq_file的小问题
在修改一个内核模块的时候,我们使用seq_file来打印我们的数据,结果非常出人意料. static void flowinfo_seq_printf_stats(struct seq_file *s ...
- angularjs 与 UEditor开发，添加directive，保证加载顺序正常
'use strict'; angular.module('app.core').directive('ueditor', [function () { return { restrict: 'A', ...
- 第六次Scrum冲刺
第六次Scrum冲刺 1.成员今日完成情况 队员 今日完成任务 刘佳 前端构建 李佳 后端设计 周世元 数据设计 杨小妮 博客编写 许燕婷 管理团队当日及次日任务 陈水莲 性能测试用例设计 曾丽丽 性 ...
- JAVAWEB 一一 userweb2（升级，servlet版,jstl和el）
创建数据库和表 首先,创建一个web项目 然后引入jar包(jstl.jar和standard.jar是jstl和el包,在jsp页面中需要手动加 <%@ taglib uri="ht ...
- Structs复习 Action
引入jar包 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...
- C# 无法识别的属性“targetFramework”。请注意属性名称区分大小写。错误解决办法
“/CRM”应用程序中的服务器错误. 配置错误 说明: 在处理向该请求提供服务所需的配置文件时出错.请检查下面的特定错误详细信息并适当地修改配置文件. 分析器错误消息: 无法识别的属性“targetF ...
- Hide-Music-Player 一个完整的音乐播放器《IT蓝豹》
Hide-Music-Player 一个完整的音乐播放器 Hide-Music-Player 一个完整的音乐播放器,本例子主要包括几个点 (1)摇一摇进入播放器 (2)下拉展开新视图(扫描音乐) (3 ...
- LinQ to sql 各种数据库查询方法
1.多条件查询: 并且 && 或者 || var list = con.car.Where(r => r.code == "c014" || r.oil == ...