HTML5中drawImage用法分析


Posted in HTML / CSS onDecember 01, 2014

本文实例分析了HTML5中drawImage使用时遇到的问题及解决方法。分享给大家供大家参考。具体分析如下:

使用Image遇到的问题:

复制代码
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var jsCanv = document.getElementById("canv");
var oCanv = jsCanv.getContext("2d");
var img = new Image();
img.src = "img.png";
oCanv.drawImage(img, 220, 30);
})
</script>
</head></p> <p> <body>
<canvas id="canv" width="500" height="500">
浏览器不支持
</canvas>
</body>
</html>

其实这种写法是有错误的,实际上只要一刷新图片就不显示出来。要想保证刷新正常显示需要在Image onload的时候重绘一次才行。测试在chrome 19下会出现的问题。

解决方案

复制代码
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var jsCanv = document.getElementById("canv");
var oCanv = jsCanv.getContext("2d");
var img = new Image();
img.src = "img.png";
img.onload = function() {
oCanv.drawImage(img, 220, 30);
}
})
</script>
</head>
<body>
<canvas id="canv" width="500" height="500">
浏览器不支持
</canvas>
</body>
</html>

希望本文所述对大家的html5程序设计有所帮助。

HTML / CSS 相关文章推荐
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
html5+css3气泡组件的实现
Nov 21 #HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 #HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 #HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 #HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 #HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 #HTML / CSS
基于html5实现的图片墙效果
Oct 16 #HTML / CSS
You might like
PHP字符串处理的10个简单方法
2010/06/30 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
token 机制和实现方式
2020/12/15 Javascript
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
Java语言的优势
2015/01/10 面试题
幼儿园家长会邀请函
2014/01/15 职场文书
项目合作协议书范本
2014/04/16 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
2014年村委会工作总结
2014/11/24 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
大学生个人学年总结
2015/02/15 职场文书
求职导师推荐信范文
2015/03/27 职场文书