zoukankan      html  css  js  c++  java
  • <canvas>drawImage()方法无法显示图片

    在书上看到用<canvas>绘制图像就动手试试,刚开始,我的代码是这样的:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <title>canvas绘图</title>
    </head>
    <body>
    <canvas id="drawimg" width="500" height="500" style="border:1px solid black;">A drawimg of something.</canvas>
        <img id="image" src="01.jpg" style="display:none" />
    <script>
    var drawimg = document.getElementById("drawimg");
    var image=document.getElementById("image");
     var context = drawimg.getContext("2d");
    context.drawImage(image,10,10); 
    </script>
    </body>
    </html>
    很可惜,在浏览器中只出现了一个黑线框,没有图片。我检查了一下,图片路径没有错,浏览器版本也支持,控制台也没有报错,,不科学啊。
    然后去w3school查了一下drawImage()这个方法,还有样例代码,看了一下样例代码感觉差不多啊,于是复制过去,,将图片改成自己本地的图片,然而并没有什么用,还是没有显示出来。纠结万分于是去网上查了一下原因。
    <script>
    window.onload=function(){
    var drawimg = document.getElementById("drawimg");
    var image=document.getElementById("image");
    var context = drawimg.getContext("2d");
    context.drawImage(image,10,10); 
    }
    </script>
    这是改过的js代码,我将原来的那些代码放在了onload里面,图片在浏览器中就显示出来了。
    因为图片是异步加载,onload 事件会在页面或图像加载完成后立即发生。在之前的代码中,执行js代码的时候图片还没有加载成功,就调用了drawImage()方法,所以图片就无法显示。
  • 相关阅读:
    spark编译报错信息简介
    [LintCode]各位相加
    [算法]头条面试—奇数位升序偶数位降序链表排序
    [算法]循环打印矩阵,蛇形矩阵专题
    [LeetCode]146.LRU缓存机制
    [算法]死磕递归和动态规划专题算法
    Storm学习笔记——高级篇
    fail-fast和fail-safe
    阿里巴巴面试之利用两个int值实现读写锁
    [爬虫]Python爬虫进阶
  • 原文地址:https://www.cnblogs.com/bluey/p/4875716.html
Copyright © 2011-2022 走看看