Board

专注WPF、SWT、Java、TUIO、lua、电子白板软件研发、多点触摸算法、跟踪算法、视频会议、触摸一体机、红外触控、触摸框架、数字图像处理研究

导航

HTML5 drawImage 使用问题

Posted on 2012-05-18 17:04  kodos  阅读(1336)  评论(0编辑  收藏  举报

最近在看HTML5,首次使用Image就遇到了问题;直接看代码:

<canvas width="800" height="600" id="mycanvas" style="border: 1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var can = document.getElementById("mycanvas");
var cxt = can.getContext("2d");
var img = new Image();
img.src = "cars.png";
cxt.drawImage(img, 50, 50);
</script>

 在网上查了使用drawimage的方法基本上都是类似上面代码,包过一些Html5方面的数,实际上只要一刷新图片就不显示出来。要想保证刷新正常显示需要在Image onload的时候重绘一次才行

<canvas width="800" height="600" id="mycanvas" style="border: 1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var can = document.getElementById("mycanvas");
var cxt = can.getContext("2d");

var img = new Image();
img.src = "cars.png";
img.onload = function () {
cxt.drawImage(img, 50, 50);
}
</script>

 

测试在chrome 19下