zoukankan      html  css  js  c++  java
  • canvas drawImage图片不显示问题

    初次学习canvas,用来做笔记记录下遇到的问题及解决方案

    这里是要将一张图片写到canvas里,按照网上搜索,初写了段代码,可是却没显示,以为是路径问题,不能跨域名使用,后来改为相对路径后,仍然无效,如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <img src="./ws.jpg" alt="" style=" 100px;" id="imgDom">
        <canvas id="myCanvas" width="300" height="300">Your browser does not support the HTML5 canvas tag.</canvas>
        <script>
            var can = document.getElementById("myCanvas");
            var ctx = can.getContext("2d");
            var imgDom = document.getElementById("imgDom");
            ctx.drawImage(imgDom, 0, 0);
        </script>
    </body>
    </html>

    后来经过搜索发现,是加载顺序的原因,很简单对不对?在图片没加载完的时候,不会调用drawImage方法,上代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <img src="http://static.huibuy.shop/tuiguang/zaozhuang/img1.jpg" alt="" style=" 100px;" id="imgDom">
        <canvas id="myCanvas" width="300" height="300">Your browser does not support the HTML5 canvas tag.</canvas>
        <script>
            var can = document.getElementById("myCanvas");
            var ctx = can.getContext("2d");
            var imgDom = document.getElementById("imgDom");
            imgDom.onload = function() {
                ctx.drawImage(imgDom, 0, 0);
            }
        </script>
    </body>
    </html>

    发现两段代码的不同了么,就是img标签上多了一个onload事件

  • 相关阅读:
    自动布局
    初探 iOS8 中的 Size Class
    iOS数据安全性问题
    iOS应用程序之间的跳转
    iOS 关于xml解析的问题
    iOS中的一些基础知识点
    关于iOS项目中使用ZBarSDK
    iOS中关于google地图的用法
    基于4.5Framework web程序、SQLSERVER数据库打包
    docker私有仓库搭建
  • 原文地址:https://www.cnblogs.com/cyj7/p/11023062.html
Copyright © 2011-2022 走看看