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 3D制作实战案例分析
Sep 18 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
使用CSS设置滚动条样式
Jan 18 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 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
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
简单的js表单验证函数
2013/10/28 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
Python struct模块解析
2014/06/12 Python
python里对list中的整数求平均并排序
2014/09/12 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
哪些是python中web开发框架
2020/06/17 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
什么是索引指示器
2012/08/20 面试题
政法大学毕业生自荐信范文
2014/01/01 职场文书
和谐社区口号
2014/06/19 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL