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

当<head>

中包含JavaScript时，您的代码在jsfiddle上正常运行

您的代码没有CSS标记。将<head>放在<body>标记内。
将JavaScript移至<!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>标记的末尾。

这是你的代码完美无缺。

{{1}}

JavaScript - 在画布上绘制圆

1 个答案: