Question

我的代码使用画布，允许人们绘制他们想要的东西，我正在尝试实现的是改变按钮点击时着色的颜色，默认颜色是黑色我有两个按钮来改变红色和绿色也是一个清晰的画布按钮，但这些按钮似乎都没有按下按钮。

<h3>Draw Something</h3>
<!DOCTYPE html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Paint Canvas</title>
   <style type="text/css">
   <!--
     #container { position: relative; }
     #imageView { border: 1px solid #000; }
   -->
   </style>

</head>

<body>

    <div id="container">
        <canvas id="imageView" width="600" height="300">
               </p>
        </canvas>
    </div>

    <script type="text/javascript" src=".js"></script>

</html>

<body >
    <input type= "button" value= "Green" id= "green" onclick= "GreenRect()" />

    <input type= "button" value= "Red" id= "red" onclick= "RedRect()" />

        <input type= "button" value= "clear canvas" 
                 id= "clear" onclick= "ImgClr()" />


        <button id="howdy">Howdy!</button><br>
</body>
    function GreenRect () {
        context.strokeStyle= 'green';
        context.stroke();
        }

        function RedRect () {
        context.strokeStyle= 'red';
        context.stroke();
        }

        function ImgClr () {
        context.clearRect(0,0, 600, 300);  
        }
        </script>

Answer 1

你确实有很多错误形成的html，比如第二个{{1}}标记以及代码中间的<body>，其中任何一个都会让浏览器完全混淆通过Firefox的高尚尝试来了解您的代码：

</html>

还有：

<html lang="en"><head></head><body><h3>Draw Something</h3> <meta charset="utf-8"> <title>Paint Canvas</title> <style type="text/css">  </style> <div id="container"> <canvas id="imageView" width="600" height="300"> <p></p> </canvas> </div> <script type="text/javascript" src=".js"></script> <input type="button" value="Green" id="green" onclick="GreenRect()"> <input type="button" value="Red" id="red" onclick="RedRect()"> <input type="button" value="clear canvas" id="clear" onclick="ImgClr()"> <button id="howdy">Howdy!</button><br> function GreenRect () { context.strokeStyle= 'green'; context.stroke(); } function RedRect () { context.strokeStyle= 'red'; context.stroke(); } function ImgClr () { context.clearRect(0,0, 600, 300); } </body></html>代码

<h3>

您原始代码底部的javascript不在<body>和<body>标记之内，也缺少开放式<head>标记。
<script>标签似乎没有做任何事情。

我强烈建议不要查看下面的代码，但首先只是根据我对它做出的评论来尝试清理你的HTML。我想你会为自己做很多事情。

<p></p>

画布在点击按钮时无法更改颜色/清除画布

1 个答案: