分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

在学习HTML5的过程中遇到的奇葩问题及解决方案

HTML5   发布时间：2022-04-25  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了在学习HTML5的过程中遇到的奇葩问题及解决方案，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

Chrome中canvas上drawImage无法画出image的解决办法

canvas html5 

在自己写demo的过程中 碰到了这样一个问题 发现drawImage方法没有达到预期的效果 图片没办法@L_618_10@ 而fillRect等画图形的方法却工作良好

大概的代码如下：

Js代码  

在学习HTML5的过程中遇到的奇葩问题及解决方案
  1. $(function() {  
  2.     var $my_canvas=$("#my_canvas");  
  3. var my_canvas=$my_canvas[0];  
  4. var context=my_canvas.getContext("2d");  
  5.     // var footprint_img=document.getElementById("footprint");  
  6. var footprint_img=new Image();  
  7.     footprint_img.src="footprint.jpg";  
  8.     context.drawImage(footprint_img,10,20,20);  
  9. });  

 

在和伙伴交流的情况下 发现在google Help下也有人碰到了类似问题

http://www.google.com/support/forum/p/Chrome/thread?tid=29d98538241bc15f&hl=en

描述了该问题 发现同样的代码在FireFox下工作良好 但是Chrome却无法绘制 并且刷新也无用 不过 如果在地址栏敲一下回车 却可以看到绘制的图片 （震惊）

 

之后请教了几位大神 被告知是由于image加载是异步的 而我在image没有加载完毕时就调用了drawImage造成的（好吧 我刚接触前端 这些东西都不注意 大家别拍脸）

 

于是上网查了关于image预加载的一些方法 最后找到了一篇排版不错 说明也很好的文章（有的文章一看就转来的 也不写转帖 也不重新排版 代码就那么混乱着 完全不想看啊）

http://apps.hi.baidu.com/share/detail/24712354

别看是百度空间就不看。。觉得说得挺清楚的 特别对于我这样的新手

具体的原理 在上文中已经说了 概括下就是在确保图片加载的情况下再去做相关动作（这是废话，文中更循序渐进）

 

改进后的代码如下：

// var footprint_img=new Image();  
  • // footprint_img.src="footprint.jpg";  
  •     preImage("footprint.jpg",function(){  
  •         context.drawImage(this,250)">     });  
  • });  
  •   
  • function preImage(url,callBACk){  
  •      var img = new Image(); //创建一个Image对象，实现图片的预下载  
  •      img.src = url;  
  •      
  • if (img.completE) { // 如果图片已经存在于浏览器缓存，直接调用回调函数  
  •          callBACk.call(img);  
  •         return; // 直接返回，不用再处理onload事件  
  •      }  
  •      img.onload = function () { //图片下载完毕时异步调用callBACk函数。  
  •          callBACk.call(img);//将回调函数的this替换为Image对象  
  •      };  
  • }  
    •  

    大佬总结

    以上是大佬教程为你收集整理的在学习HTML5的过程中遇到的奇葩问题及解决方案全部内容，希望文章能够帮你解决在学习HTML5的过程中遇到的奇葩问题及解决方案所遇到的程序开发问题。

    如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
    标签：5htmlhtml5奇葩学习方案解决过程中遇到问题
    猜你在找的HTML5相关文章
    其他相关热搜词更多
    phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap