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事件

  • 相关阅读:
    [BZOJ3812]主旋律
    【二分答案】【最大流】[HNOI2007]紧急疏散EVACUATE
    【费用流】NOI2008志愿者招募
    【bzoj1594】猜数游戏
    【贪心】Highway
    【数形结合】Erratic Expansion
    【斜率优化】Average
    【思维】Stacks of Flapjacks
    【二分】Defense Lines
    【DFS】【打表】Lattice Animals
  • 原文地址:https://www.cnblogs.com/cyj7/p/11023062.html
Copyright © 2011-2022 走看看