1

JavaScriptコードから描画されたHTML5 Canvasを学習しようとしています。

元の html から Javascript コードを分離できなかったようです。いくつかの解決策を探していました:

両方のソリューションを実装した後、私には空白のキャンバスが表示されるため、これらは私にとって解決策ではありませんでした。

これが私のコードです。

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

理由はわかりませんが、この Web サイトからの投稿から取得したこの種のコードのみが機能し、javascript を外部ファイルに分離できませんでした。

TL;DR : javascript を html から分離して、canvas で作業したいと考えていました。

助けてくれる人はいますか？

4

2 に答える 2

0

申し訳ありません。外部のJavaScriptをロードしないようにしたのは私のタイプミスです。@CBroeはそれを指摘し、現在はすべて機能しているようです。

于 2013-05-02T03:30:08.810 に答える
0

<!--andも// -->外部ファイルにコピーしていると推測する必要があります。もしそうなら、それをしないでください。過去数千年間のブラウザーにケータリングしている場合を除き、それらを使用する必要はありません。

于 2013-04-24T14:05:22.980 に答える