HTML5中drawImage用法分析

2020-03-24 15:52:48

字体：大中小

来源：转载

供稿：网友

本文实例分析了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文件也能格式化硬盘