问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

canvas绘制图片失败？

头像
undefind_5
    1.5k1298133

    直接代码

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body,html{
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .paint_box{
                width: 480px;
                margin: 0 auto;
                padding-top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="paint_box">
            <canvas id="canvas" width="480px" height="650px">
                Your browser does not support the canvas element.
            </canvas>
        </div>
        <script type="text/javascript">
            var c=document.getElementById("canvas");
            var cxt=c.getContext("2d");
            var img=new Image()
            img.src="images/background.png"//这个路径是肯定正确的
            cxt.drawImage(img,0,0);
        </script>
    </body>
</html>

    一直绘制失败，我这是照抄的手册上的啊，页面打开，一片空白。是我打开方式不对？什么情况

    clipboard.png
    这是我控制台的截图

    htmljavascript
    阅读 6.4k
    3 个回答
    得票最新
    头像
    Dont
      7k163552
      ✓ 已被采纳
          var c=document.getElementById("canvas");
            var cxt=c.getContext("2d");
            var img=new Image();
            img.src="jqevent1.png";//这个路径是肯定正确的
            img.onload = function(){

                cxt.drawImage(img,0,0);
            }

      改成这样可以了，img.src赋值的时候，图片才开始去加载，还没加载完，就直接drawImage了，估计就空白。

      头像
      QuanYi
        1164

        稍微做了改动：

        img.src="language.png";//这里有个异步加载，图片不会一下子就完成加载的；
img.onload = function(){
  cxt.drawImage(img,0,0);
};
        头像
        jesse131
          348515

          drawImage(img,0,0)这个参数传错了
          W3School上这样用
          var c=document.getElementById("myCanvas");
          var ctx=c.getContext("2d");
          var img=document.getElementById("tulip");
          ctx.drawImage(img,10,10);

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题