简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

HTML5中drawImage用法分析

来源:易贤网   阅读:744 次  日期:2015-01-29 15:59:08

温馨提示:易贤网小编为您整理了“HTML5中drawImage用法分析”,方便广大网友查阅!

本文实例分析了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>

更多信息请查看IT技术专栏

更多信息请查看网页制作
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:列元素所用属性之谜
下一篇:HTML5中drawImage用法分析
易贤网手机网站地址:HTML5中drawImage用法分析
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!