1

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

似乎我无法将 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 分开以使用画布。

有帮助吗？

4

2 回答 2

0

我不得不猜测您也在将<!--and复制// -->到您的外部文件中。如果是这样，请不要这样做。你甚至不应该再使用它们，除非你正在迎合上个千年的浏览器。

于 2013-04-24T14:05:22.980 回答
0

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

于 2013-05-02T03:30:08.810 回答