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中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 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
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
PDO::_construct讲解
2019/01/27 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
Python最基本的输入输出详解
2015/04/25 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
python爬虫基本知识
2018/03/05 Python
python3 flask实现文件上传功能
2020/03/20 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
审核会计岗位职责
2013/11/08 职场文书
电子商务专业个人的自我评价
2013/12/19 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书