Html5 drawImage 无法显示问题
2014-04-13 11:50
393 查看
最近开始看html5,看到html5 canvas 可以直接drawImage ,于是看着文档写了个demo,可是总是空白的,一开始以为路径问题,各种改路径,改图片位置,后来以为是我Chrome 浏览器的问题,于是换其他浏览器一样不显示,后来查了下,是因为图片没加载完成,所以在调用drawImage的方法的时候是空白的
修改如下就可以了,说实话,html5确实比flex效率高了很多。
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;"> Your browser does not support the HTML5 canvas tag. </canvas> <script type="text/javascript"> var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); var img = new Image(); img.src = "assets/images/1.jpg"; cxt.drawImage(img,0,0); </script> </body> </html>
修改如下就可以了,说实话,html5确实比flex效率高了很多。
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;"> Your browser does not support the HTML5 canvas tag. </canvas> <script type="text/javascript"> var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); var img = new Image(); img.src = "assets/images/1.jpg"; img.onload=function (){ cxt.drawImage(img,0,0); } </script> </body> </html>
相关文章推荐
- 解决html5 + js开发APP无法显示SVG问题(转化成canvas)
- html5 drawImage 不显示问题
- html5 drawImage图片不显示问题
- html5 drawImage图片不显示问题
- 解决html5 + js开发APP无法显示SVG问题(转化成canvas)
- NET中"无法显示 XML 页。 使用 XSL 样式表无法查看 XML 输入。"问题的解决
- IE6下 jquery局部刷新无法显示的问题
- 《程序猿的第n+2天》-Myeclipse下图片无法显示问题
- 解决在Linuxmint18.1环境下fcitx无法显示候选框的问题
- Windows 7中,用Visual Studio开发WPF应用程序,实现从Windows Explorer中拖拽文件到应用程序,始终显示“无法拖放”符号问题解决方案
- zxing 黑屏 无法显示图像问题 及中文乱码问题解决
- PHP动态生成的图片无法显示问题
- 无法显示页面 要查找的页面是当前不可用。该网站可能遇到技术的问题,或者您可能需要调整您的浏览器设置。
- html5 canvas图像在谷歌浏览器下不显示问题
- nc界面推单界面无法显示已生成单据问题
- [PHP]GD库生成图像无法在浏览器正常显示的问题(更新:使用GD图像生成类发现错误必须及时清理缓存!)
- DataTable实现列位置交换,用于SQL语句无法解决字段页面显示顺序问题
- 使用response.setHeader("Content-Disposition","attachment;filename="+fName)下载文件,中文文件名无法显示的问题
- 自定义jquery模态窗口插件无法在顶层窗口显示问题
- Chrome下flash无法显示多个的问题。