Canvas绘图拖拽

aiguangyuan

已于 2022-07-20 16:53:34 修改

阅读量1.3k

点赞数 1

分类专栏： HTML 文章标签：前端开发 HTML Canvas

于 2019-06-16 22:00:17 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/92433186

版权

HTML 专栏收录该内容

35 篇文章 4 订阅

订阅专栏

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Canvas绘图拖拽</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background: black;
        }

        canvas {
            background: white;
        }
    </style>
</head>

<body>
    <canvas width=500 height=500 id='canvas'>
        您的浏览器版本过低，请更新浏览器
    </canvas>
    <script type="text/javascript">

        var offset = {
            x: 50,
            y: 50
        }

        obj = canvas.getContext('2d');
        obj.beginPath();
        obj.rect(offset.x, offset.y, 200, 100);
        obj.strokeStyle = 'blue';
        obj.lineWidth = 1;
        obj.fillStyle = 'red';
        obj.fill();
        obj.stroke();

        canvas.onmousedown = function (e) {
            var ev = e || event;
            var l = ev.clientX - offset.x;
            var t = ev.clientY - offset.y;

            document.onmousemove = function (e) {
                var ev = e || event;
                clear();
                obj.beginPath();
                obj.rect(ev.clientX - l, ev.clientY - t, 200, 100);
                obj.strokeStyle = 'blue';
                obj.lineWidth = 1;
                obj.fillStyle = 'red';
                obj.fill();
                obj.stroke();
            };

            document.onmouseup = function (e) {
                offset.x = e.clientX - l;
                offset.y = e.clientY - t;
                this.onmousemove = this.onmouseup = null;
            };
            return false;
        }

        function clear() {
            obj.beginPath();
            obj.clearRect(0, 0, canvas.width, canvas.height);
            obj.stroke();
        }

    </script>
</body>

</html>