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布局
Jul 12 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
CSS的class与id常用的命名规则
May 18 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 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循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
基于python实现KNN分类算法
2020/04/23 Python
python之yield和Generator深入解析
2019/09/18 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
会话Bean的种类
2013/11/07 面试题
解释i节点在文件系统中的作用
2013/11/26 面试题
咖啡厅创业计划书范本
2014/01/22 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
后勤主管岗位职责
2014/03/01 职场文书
大学新闻系求职信
2014/06/03 职场文书
防汛工作情况汇报
2014/10/28 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
详解MySQL的半同步
2021/04/22 MySQL
k8s部署redis cluster集群的实现
2021/06/24 Redis