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等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
PHP+ajax 无刷新删除数据
2010/02/20 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
JavaScript初学者必看“new”
2017/06/12 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
python属于跨平台语言码
2020/06/09 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
中国梦演讲稿教师篇
2014/04/23 职场文书
导师工作推荐信范文
2014/05/17 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
MySQL之DML语言
2021/04/05 MySQL
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
python实现三阶魔方还原的示例代码
2021/04/28 Python
Mybatis是这样防止sql注入的
2021/12/06 Java/Android