1

我正在阅读一本名为“Beginning Facebook Game Apps Dev”的书，在第 3 章中，他们向我们介绍了如何为 html 文档创建代码。

我在 Mac 上，我使用 TextEdit 创建页面。起初，这本书给出了绘制矩形和三角形的代码。两者都很好，但后来我尝试了代码轮换，它只显示了这个框。

我已经用 C++ 编程了一段时间，但我并不是专家，但我对互联网的工作原理一无所知。无论如何，我能看到的唯一区别是有效的代码和无效的代码是旋转的事实，我调用函数，而矩形我没有。谁能告诉我发生了什么事吗？

ps：我试图谷歌 html 5 功能不起作用，但老实说，我对如何搜索这个特定问题一无所知。

谢谢你

代码工作（绘制矩形）

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <meta    name="viewport"    content="width=device-width,initial-scale=1">

    <title>A simple Canvas Square</title>
    <style type="text/css"    media="screen">
    #canvas
    {
        border: 1px solid #c0c0c0;
    }
    </style>

</head>
<body>
    <canvas id="canvas" width="270" height="270"></canvas>

    <script type="text/javascript"    charset="utf-8">

        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        context.fillStyle = "gray";
        context.fillRect(30, 30, 200, 200);
    </script>
</body>
</html>

代码不工作（轮换）

<!DOCTYPE HTML>
<html>
<head>
    <meta   http-equiv="content-type"   content="text/html;  charset=utf-8">

    <title>overlapping box</title>
    <style type="text/css"    media="screen">
    #canvas
    {
        border: 1px solid #c0c0c0;
    }
    </style>

</head>
<body>
    <canvas id="canvas" width="500" height="400"></canvas>

    <script type="text/javascript"    charset="utf-8">
        function draw(canvas Id)
        {
        "use strict";
        var canvas = document.getElementById(canvasId);
        var context = canvas.getContext("2d");

        context.fillStyle = "#091F5D";
        context.fillRect(10, 10, 160, 150);

        context.fillStyle = "rgba(255, 78, 0, 0.5)";
        context.fillRect(90, 90, 160, 150);

        context.fillStyle = "rgb(255, 78, 0)";
        context.fillRect(170, 160, 160, 150);
        }

        draw('canvas');
    </script>
</body>
</html>
4

1 回答 1

3

在这一行：

function draw(canvas Id)

'canvas' 和 'Id' 之间不应有空格。将其更改为：

function draw(canvasId)

canvasId是参数的名称（传递的值是要在其中绘制矩形的画布元素的 id）。

于 2012-07-01T01:15:02.470 回答