Question

我正在尝试在画布中插入图像，但我的代码似乎无法正常工作。我正在获得具有适当背景颜色的画布，但不知何故图像不会显示。这是我的代码。画布上的字符 .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>

Answer 1

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

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);
}

Answer 2

尝试将图片与相对路径关联，或直接关联到http://jsfiddle.net/combizs/5L7uL/。

以下是linking to a file stored online

的示例

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

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

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

2 个答案: