在html画布代码中插入图像不起作用

inserting image in html canvas code not working

本文关键字：插入 图像 不起作用 代码 html 布代码      更新时间：2023-11-07

我试图在画布中插入一个图像，但我的代码似乎不起作用。我得到了一个背景颜色合适的画布，但不知怎么的，图像没有显示出来。这是我的密码。画布上的角色.canvas1{背景颜色：灰色；边框：1px实心；}

</head>
<body>
    <div id="imagediv">
        <img id="spear1" src="E:'html-files'spear.png" style="height:150px; width:150px" draggable="true" ondrag="drag()" >
    </div>
    <div id="canvasdiv">
        <canvas id="mainCanvas" class="canvas1" height="500px" width="600px"></canvas>
    </div>
    <script>
        var canvas=document.getElementById("mainCanvas");
        var ctx=canvas.getContext("2d");
        var img=document.getElementById("spear1");
        ctx.drawImage(img,0,0,160,160);
    </script>
</body>

如果您想在画布中插入图像，则图像必须在插入之前已加载，因此您的代码可能如下所示：

var canvas=document.getElementById("mainCanvas");
var ctx=canvas.getContext("2d");
var img=document.getElementById("spear1");
img.onload = function(){
     ctx.drawImage(img,0,0,160,160);
}

尝试用相对路径链接图像，或者直接链接到http://jsfiddle.net/combizs/5L7uL/.

以下是链接到在线存储的文件的示例

<img id="spear1" src="http://jamesmcgillis.com/upload/google_logo_001_small.jpg"...

如果它不适合您，请确保您的浏览器支持画布：-）

相关文章：