zoukankan      html  css  js  c++  java
  • 解决CHROME中画布中无法显示图片的方法

    最终效果图如下

    我按照W3SCHOOL里面的方法,代码如下

    <!DOCTYPE html>
    <html>
    <body>
    
    <script type="text/javascript">
    
    
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("tulip");
    ctx.drawImage(img,10,10);
    
    //tulip.src="eg_tulip.jpg";
    
    
    </script>
    <p>要使用的图像:</p>
    <img id="tulip" src="eg_tulip.jpg" alt="The Tulip" />
    
    <p>画布:</p>
    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
    
    
    
    
    
    </body>
    </html>
    

      但是在谷歌浏览器显示如下:

    图片无法显示

    解决方法:

    在body的onload方法里加载script段里的代码就Ok了,代码如下

    <!DOCTYPE html>
    <html>
    
    <!--加一个方法ONLOAD时候用上-->
    <body onLoad="abc()">
    
    <script type="text/javascript">
    
    /*这里做成一个方法,方便ONLOAD时调用*/
    function abc()
    {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("tulip");
    ctx.drawImage(img,10,10);
    }
    //tulip.src="eg_tulip.jpg";
    
    
    </script>
    <p>要使用的图像:</p>
    <img id="tulip" src="eg_tulip.jpg" alt="The Tulip" />
    
    <p>画布:</p>
    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
    
    
    
    
    
    </body>
    </html>
    

      

  • 相关阅读:
    xshel链接linuxl安装nginx
    nginx学习笔记
    sweiper做一个tab切换
    bootstrap中tab切换的使用
    pc页面自动缩放到手机端
    日程表
    页面嵌套iframe时,怎样让iframe高度根据自身内容高度自适应
    mysql5.7版本以上下载安装
    电脑快捷键操作汇总
    关于.eslintrc.js代码检测的一些配置
  • 原文地址:https://www.cnblogs.com/kmsfan/p/3484763.html
Copyright © 2011-2022 走看看