Canvas中 drawImage绘制图片不显示
2024-10-19 02:20:32
在学习 html5中的 Canvas.drawImage时写了如下代码:
<!doctype html>
<html>
<head><title>研究</title></head>
<body>
<canvas id="canvas" style="width:500px;height:400px; border:1px solid red"></canvas>
<img id="img" src="ggg.jpg" hidden />
</body>
<Script type="text/javascript">
var cxt = document.getElementById("canvas").getContext("2d");
var imgElement = document.getElementById("img");
cxt.drawImage(imgElement, 10, 10, 200, 200);
</Script>
</html>
在charome和firefox中都无法显示绘制的图片效果。后来查询了很多资料,才知道canvas在绘制图片的时候要等到img的图片完全加载到客户端后才可以绘制正确,现在的代码中直接是绘制图片,图片还没加载完就开始在绘制图片了,把代码稍微改下:
<!doctype html>
<html>
<head><title>研究</title></head>
<body>
<canvas id="canvas" style="width:500px;height:400px; border:1px solid red"></canvas>
<img id="img" src="ggg.jpg" hidden />
</body>
<Script type="text/javascript">
var cxt = document.getElementById("canvas").getContext("2d");
var imgElement = document.getElementById("img");
setTimeout(function () { cxt.drawImage(imgElement, 10, 10, 200, 200); },0);
</Script>
</html>
或者
<!doctype html>
<html>
<head><title>研究</title></head>
<body>
<canvas id="canvas" style="width:500px;height:400px; border:1px solid red"></canvas>
<img id="img" src="ggg.jpg" hidden />
</body>
<Script type="text/javascript">
var cxt = document.getElementById("canvas").getContext("2d");
var imgElement = document.getElementById("img");
imgElement.onload = function () { cxt.drawImage(imgElement, 10, 10, 200, 200); };
</Script>
</html>
就可以正常显示绘制的图片了。
最新文章
- HDU4738 tarjan割边|割边、割点模板
- display_inline-block_table-cell
- CSS3盒模型温故
- 时间同步出现ntpdate[1788]: the NTP socket is in use, exiting
- Post请求和get请求乱码方式解决
- empty()函数经典详解
- PowerDesigner生成Oracle数据字典
- IOS键盘收起
- hdoj 2199 Can you solve this equation?【浮点型数据二分】
- ios开发使用lipo命令合并真机库和模拟器库
- [Git]06 如何提交空目录
- Linux 系统监控常用命令
- PHP正则表达式二分法实现mysql盲注脚本
- Windows7安装程序无法定位现有系统分区,也无法创建新的系统分区
- vue 学习笔记—路由篇
- sql查询条件为空的另类写法o( ̄▽ ̄)d
- 【云计算】IaaS、PaaS和SaaS
- git第七节---git merge和git rebase
- [AngularJS]ng-repeat指令要点
- session和cookie的异同