从 HTML Canvas 中分离 Javascript 代码答案

【问题标题】：Separate Javascript code from HTML Canvas从 HTML Canvas 中分离 Javascript 代码
【发布时间】：2013-04-18 03:00:48
【问题描述】：

我正在尝试学习 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 分开以使用画布。

有帮助吗？

【问题讨论】：

我不明白这个问题。你能改写一下吗？
您介意在浏览器控制台中发布任何错误代码吗？
自 Netscape 3 以来，不再需要在 <script> 标签周围放置块 HTML cmets...
@akonsu 在 TL;DR 上添加了一些简短描述。
Joe 在浏览器控制台上似乎没有收到任何错误。 @Alnitak我无法使用任何其他解决方案。请给我这个古老代码的替代方案。 :)

标签： javascript html canvas

【解决方案1】：

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

【讨论】：

刚才试过了。似乎也没有工作。你能给我一个替代这个解决方案的方法吗？我使用此代码的唯一原因是因为它是唯一可以在我的计算机上运行的代码。
我什么也没看到。尝试在 chrome 上打开检查元素。还是我打开了错误的东西？
当你打开inspector时，你是否在inspector窗口的右下角看到一个带有数字的红色小X？
找不到那个。但是，当我看到检查器的“网络”选项卡时，似乎根本没有加载 javascript。我的 javascript 链接有问题吗？代码是还要确保 javascript 也被命名为 paint.js。
type="text/javasript" – 真的，还是在这里发帖时打错字？

【解决方案2】：

对不起各位。是我的错字导致任何外部 javascript 无法加载。 @CBroe 指出了这一点，现在似乎一切正常。

【讨论】：