用javascript在画布上绘制图像

Draw image on canvas with javascript

本文关键字：绘制 图像 javascript      更新时间：2023-09-26

为什么画布上什么都没有显示?图片和代码在同一个文件夹，我试过直接复制一些代码，只是改变源代码，它仍然不起作用。这让我相信，这不是我实际绘画方式的错误，而是我加载画布的方式的错误?我可以在画布上添加其他东西，但不能添加图片。

<!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>

您很可能从某处复制了这段代码，而忘记更改图像对象的名称

<!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>
相关文章：