使用JavaScript在画布上绘制图像

Question

Why does nothing show up on the canvas? 为什么画布上什么都没有显示？ The picture is in the same folder as the code, I've tried to directly copy some code, and just change the sources, it still doesn't work. 图片与代码位于同一文件夹中，我尝试直接复制一些代码，仅更改源代码，仍然无法使用。 That leads me to believe, that it is not a fault in the actual way I draw the picture, but in the way I load the canvas? 那使我相信，这不是我实际绘制图片的方式的错误，而是我加载画布的方式的错误？ I can add other stuff to the canvas, just not pictures. 我可以在画布上添加其他内容，而不能添加图片。

<!DOCTYPE html>
<head></head>
<body>
<script>

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.height = 500;
    canvas.width = 800;
    document.body.appendChild(canvas);

    var imag = new Image();

    imag.onload = function() {
        context.drawImage(imageObj, 0, 0);
    };
    imag.src = "underwater.png";

</script>
</body>

Answer 1

You most likely copied this code from somewhere and forgot to change the image object name 您很可能是从某个地方复制了此代码，却忘记了更改图像对象名称

<!DOCTYPE html>
<head></head>
<body>
<script>

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.height = 500;
    canvas.width = 800;
    document.body.appendChild(canvas);

    var imag = new Image();

    imag.onload = function() {
        context.drawImage(imag, 0, 0);
    };
    imag.src = "underwater.png";

</script>
</body>

使用JavaScript在画布上绘制图像

问题描述

1 个解决方案

解决方案1
0 2014-08-14 12:22:08

使用JavaScript在画布上绘制图像

问题描述

1 个解决方案

解决方案1 0 2014-08-14 12:22:08

解决方案1
0 2014-08-14 12:22:08