canvas drawImage图片不显示问题

最新推荐文章于 2024-01-17 08:47:39 发布

didi8969

最新推荐文章于 2024-01-17 08:47:39 发布

阅读量973

点赞数

文章标签： javascript c# ViewUI

原文链接：http://www.cnblogs.com/cyj7/p/11023062.html

版权

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="width: 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="width: 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事件

posted on 2019-06-14 14:24 安蝶阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/cyj7/p/11023062.html

didi8969

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas drawImage图片不显示问题

canvas drawImage图片不显示问题初次学习canvas，用来做笔记记录下遇到的问题及解决方案这里是要将一张图片写到canvas里，按照网上搜索，初写了段代码，可是却没显示，以为是路径问题，不能跨域名使用，后来改为相对路径后，仍然无效，如下：...
复制链接

扫一扫