Question

当我的笔在窗口盘旋时，我正在尝试创建新的圈子。我遇到了无法在页面中添加圆圈的问题。它只是在徘徊。我如何能够修改我的代码，以便在它悬停时添加圈子。

<!doctype html>
<html>
<head>
    <title> JavaScript Environment: Project </title>
    <meta charset="utf-8">
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #canvas {
            background-color: yellow;
            width: 100%;
            height: 100%;
        }
        .pen {
            position: absolute;
            background-color: lightblue;
            width: 10px;
            height: 10px;
            border-radius: 5px;
        }
    </style>
    <script>
        window.onload = function() {
            function Circle(x, y) {
                this.x = x;
                this.y = y;
            }
            var canvas = document.getElementById("canvas");

            canvas.onmousedown = function() {
                mouseDown();
            };
            canvas.onmouseup = function() {
                mouseUp()
            };
            canvas.onmousemove = function() {
                mouseMove(event)
            };
            function mouseDown (){
                console.log ("mouse down");
            }
            function mouseUp (){
                console.log ("mouse up");
            }
            function mouseMove(e) {
                var canvas = document.getElementById("canvas");
                var pen = document.createElement("div");
                var x = e.clientX;
                var y = e.clientY;
                var coor = "Coordinates: (" + x + "," + y + ")";
                pen.setAttribute("class", "pen");
                pen.style.left = x + "px";
                pen.style.top = y + "px";
                document.getElementById("canvas").innerHTML = coor;
                canvas.appendChild(pen);
                addCircles(x, y);

                console.log("location @ " + x + " : " + y);

            }
            function addCircles(x, y) {
                var canvas = document.getElementById("canvas");
                var circle = document.createElement("div");
                circle.setAttribute("class", "pen");
                circle.style.left = x + "px";
                circle.style.top = y + "px";
                canvas.appendChild(circle);

            }
            canvas.addEventListener("mouseMove", mouseMove, false);
        };
    </script>
</head>
<body>
<div id="canvas"></div>
</body>
</html>

Answer 1

问题在于行document.getElementById("canvas").innerHTML = coor;

尝试在画布div中添加范围<span id="canvasText"></span>，然后将上一行更改为document.getElementById("canvasText").innerHTML = coor;。

就目前而言，每次鼠标移动时，您都会“重置”画布的内容，因此可以立即从中删除圆圈。仅重置画布内的跨度以保持圆圈。

创建圈子（div）并将其附加到div＃canvas

1 个答案: