Question

我正在尝试学习HTML5 Canvas，它是从javascript代码中提取的。

似乎我无法将Javascript代码与原始html分开。一直在寻找一些解决方案：

这些对我来说不是一个解决方案，因为在我实现这两个解决方案后，我看来是空白画布。

这是我的代码。

<!DOCTYPE html>
<html>
<head>
    <title>Christoper Hans' Paint HTML5 Project</title>
    <link rel="stylesheet" type="text/css" href="paint.css">
    <script type="text/javascript"><!--
        window.addEventListener('load', function () {
            var ctx = document.getElementById("paint").getContext("2d");
            ctx.canvas.width  = window.innerWidth;
            ctx.canvas.height = window.innerHeight;

            function drawRect(ctx, x1, y1, x2, y2, fill) {

            ctx.fillStyle=fill;
            ctx.fillRect(x1, y1, x2, y2);
            }

            drawRect(ctx, 100, 100, 200, 250, "FF0000");
        }, false);
// --></script>

</head>
<body>
    <canvas id="paint" width="500" height="500" style="border:1px solid #c3c3c3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
</body>

我不知道为什么，但是我从这个网站的帖子中得到的这种代码有效，我无法将javascript与外部文件分开。

TL; DR：希望将javascript与html分开以使用canvas。

任何帮助人员？

Answer 1

我不得不猜测您还要将复制到外部文件中。如果是这样，请不要这样做。你甚至不应该再使用它们，除非你正在迎合上个世纪的浏览器。

Answer 2

对不起伙计们。这是我的拼写错误，使任何外部JavaScript无法加载。 @CBroe指出了这一切，现在似乎都在运作。

从HTML Canvas中分离Javascript代码

2 个答案: