JavaScript - 在画布上画圆

Question

我正在练习 JavaScript 和 HTML，所以请和我在一起。

我下面的代码应该在页面加载时创建弹出消息和画布（矩形）。当我点击画布时，它会画一个红色的圆圈，当双击画布（矩形）时，圆圈会变为红色。

由于某些原因，在画布上单击时不会绘制红色圆圈。请您帮我解决这个问题并告诉我如何实现更改颜色功能？

感谢您的任何意见。

<!DOCTYPE html>
<html>
<style type="text/css">
  canvas {border: 1px solid #000;}
</style>

<script type="text/javascript">
   // popup message when page loads
   function popUpMessage() {
     alert("Please click left top corner");
   }

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

   // click canvas
   function clickCanvas(imageId) {
      canvas.style.display = "block";
      document.getElementById("images").style.overflowY = "hidden";
      var img = new Image(400, 300);
      img.src = document.getElementById(imageId).src;
      context.drawImage(img, (0), (0)); //onload....
    }

    // draw red circle on click
    function drawCircle(e) {
      posx = 100;
      posy = 100;
      context.fillStyle = "#FF0000";
      context.beginPath();
      context.arc(posx, posy, 100, 0, 2*Math.PI);
      context.fill();
    }

    // change from red to blue on double click
    function changeColor() {
    }

    window.drawCircle = drawCircle;

  </script>



  <body onload="popUpMessage()">
    <div id="images"></div>
    <canvas style="margin:0;padding:0;position:relative;left:50px;top:50px;" id="imgCanvas" width="400" height="300" onclick="drawCircle(event)"></canvas>
  </body>
</html>

更新代码，具有单击和双击功能。

    <!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            canvas {border: 1px solid #000;}
        </style>
    </head>

    <body onload="popUpMessage()">
        <div id="images"></div>
        <canvas style="margin:0;padding:0;position:relative;" id="imgCanvas" width="400" height="300" onclick="drawCircle(event)" ondblclick="changeColor(event)"></canvas>
        <script type="text/javascript">
            // popup message when page loads
            function popUpMessage() {
                alert("Please click left top corner");
            }

            var canvas = document.getElementById("imgCanvas");
            var context = canvas.getContext("2d");
var timer;
    var status = 1;

            // click canvas
            function clickCanvas(imageId) {
                canvas.style.display = "block";
                document.getElementById("images").style.overflowY = "hidden";
                var img = new Image(400, 300);
                img.src = document.getElementById(imageId).src;
                context.drawImage(img, (0), (0)); //onload....
            }

            // draw red circle on click
            function drawCircle(e) {

                 status = 1;
        timer = setTimeout(function() {
            if (status == 1) {
                posx = 100;
                posy = 100;
                context.fillStyle = "#FF0000";
                context.beginPath();
                context.arc(posx, posy, 100, 0, 2 * Math.PI);
                context.fill();
            }
        }, 5);


            }

// change from red to blue on double click
function changeColor(event) {
        clearTimeout(timer);
        status = 0;
popUpMessage();
    }

            window.drawCircle = drawCircle;
        </script>
    </body>
</html>

Answer 1

当 JavaScript 包含在 <body> 中时，您的代码在 jsfiddle 上运行良好

• 您的代码没有<head> 标签。将您的 CSS 放在 <head> 标记内。
• 将 JavaScript 移动到 <body> 标记的末尾。

这是您完美运行的代码。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            canvas {border: 1px solid #000;}
        </style>
        <link rel="stylesheet" href="stylespacewars.css" />
        <script src="jsspacewars.js"></script>
        <script src="jquery.js"></script>
        <title></title>
    </head>

    <body onload="popUpMessage()">
        <div id="images"></div>
        <canvas style="margin:0;padding:0;position:relative;left:50px;top:50px;" id="imgCanvas" width="400" height="300" onclick="drawCircle(event)" ondblclick="changeColor(event)"></canvas>
        <script type="text/javascript">
            // popup message when page loads
            function popUpMessage() {
                alert("Please click left top corner");
            }

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

            // click canvas
            function clickCanvas(imageId) {
                canvas.style.display = "block";
                document.getElementById("images").style.overflowY = "hidden";
                var img = new Image(400, 300);
                img.src = document.getElementById(imageId).src;
                context.drawImage(img, (0), (0)); //onload....
            }

            // draw red circle on click
            function drawCircle(e) {
                posx = 100;
                posy = 100;
                context.fillStyle = "#FF0000";
                context.beginPath();
                context.arc(posx, posy, 100, 0, 2 * Math.PI);
                context.fill();
            }

            // change from red to blue on double click
            function changeColor() {
                posx = 100;
                posy = 100;
                context.fillStyle = "#0000FF";
                context.beginPath();
                context.arc(posx, posy, 100, 0, 2 * Math.PI);
                context.fill();
            }

            window.drawCircle = drawCircle;
        </script>
    </body>
</html>