原生画框的编写

 
 

 

 

 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        #canvas {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="1200" height="600"></canvas>
    <script>
        (function() {
            //   获取canvas左上角坐标
            const oCanvas = document.getElementById("canvas"),
                oCanvasLeft = oCanvas.offsetLeft,
                oCanvasTop = oCanvas.offsetTop;
            const ctx = oCanvas.getContext("2d");
            let position = {};

            // 绑定鼠标按下事件
            oCanvas.addEventListener("mousedown", function(e) {
                clear();
                // 画线
                let mouseX1 = e.pageX - oCanvasLeft,
                    mouseY1 = e.pageY - oCanvasTop;
                drawLine(mouseX1, mouseY1);

                //   绑定鼠标移动事件，必须写在按下事件里面
                this.addEventListener("mousemove", mousemove);

                //   鼠标抬起移除鼠标移动事件
                this.addEventListener("mouseup", function() {
                    oCanvas.removeEventListener("mousemove", mousemove);
                    console.log(position);
                    oCanvas.removeEventListener('mouseup', arguments.callee)
                });

                //   绘制线条：这里的x，y就是线的坐标
                function drawLine(x, y) {
                    ctx.beginPath();
                    ctx.moveTo(0, 0);
                    ctx.lineTo(x, y);
                    ctx.closePath();
                    ctx.stroke();
                }

                //   绘制矩形：这里的x, y, w, h就是矩形的坐标和宽高
                function drawRect(x, y, w, h) {
                    ctx.beginPath();
                    ctx.strokeRect(x, y, w, h);
                    ctx.closePath();
                    position = {
                        x,
                        y,
                        w,
                        h
                    };
                }

                //   鼠标移动
                function mousemove(ev) {
                    let mouseX2 = ev.pageX - oCanvasLeft,
                        mouseY2 = ev.pageY - oCanvasTop;
                    if (mouseX2 !== mouseX1 || mouseY2 !== mouseY1) {
                        clear();
                        drawLine(mouseX1, mouseY1);
                        drawRect(mouseX1, mouseY1, mouseX2 - mouseX1, mouseY2 - mouseY1);
                    }
                }

                //   清除画布
                function clear() {
                    ctx.clearRect(0, 0, oCanvas.width, oCanvas.height);
                }
            });
        })();
    </script>
</body>

</html>
posted @ 2021-01-14 10:41  诡道也  阅读(64)  评论(0)  编辑  收藏  举报