Question

我试图在webmatrix中执行此代码。但不知道为什么我没有得到结果。我得到原始图像但不是画布。我也是webmatrix的新手。

这是我的代码：

<!DOCTYPE html>
<html>

    <body>
        <p>Image to use:</p>
        <img id="scream" src="happy.png" alt="The Scream" width="220" height="277">
        <p>Canvas</p>
        <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
        <script>
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var img = document.getElementById("scream");
            ctx.drawImage(img, 10, 10);
        </script>
    </body>

</html>

Answer 1

这不是Web Pages框架和WebMatrix的问题，而是Canvas API。

在实例化drawImage（）方法之前，代码必须等待加载图像。您可以使用image对象的onload属性来完成此操作，如下例所示：

<script>
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var img = document.getElementById("scream");
        img.onload = function () {
            ctx.drawImage(img, 10, 10);
        }
</script>

Canvas标签在Webmatrix中不起作用

1 个答案: