使用canvas画布利用js通过鼠标实现矩形的绘制（任意方向的绘制图形）

最新推荐文章于 2024-05-15 17:08:40 发布

时光飞逝，岁月依然

最新推荐文章于 2024-05-15 17:08:40 发布

阅读量1.9k

点赞数 2

分类专栏： html js 文章标签： canvas js html5

本文链接：https://blog.csdn.net/qq_43260038/article/details/105242713

版权

html 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

使用canvas画布利用js通过鼠标实现矩形的绘制（任意方向的绘制图形）(如果要绘制其他图形，做一点小改动就行了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #cav{

            position: absolute;

            border:1px solid black;

        }
    </style>
</head>
<body>
<canvas id='cav' width="500" height="400" style='background-color: #F0F8FF'></canvas>

<script>

    function MyPaint(id,color='red'){

        var canvas = document.getElementById(id);

        this.canvas = canvas;

        this.color = color;

        this.ctx = this.canvas.getContext('2d');

        this.p1= {};

        this.p2 = {};

    }

    MyPaint.prototype.paintRect = function(){

        var myPaint = this;

        this.canvas.addEventListener('mousedown',function(e){

            console.info('mousedown',this);

            this.p1.x = e.offsetX;

            this.p1.y = e.offsetY;

            this.canvas.addEventListener("mousemove",myDrect);

            this.canvas.addEventListener("mouseup",function(){

                console.info("mouseup");

                console.info(myDrect);

                this.removeEventListener("mousemove",myDrect);

            })

        }.bind(this));



        function  myDrect(e){

            myPaint.p2.x = e.offsetX;

            myPaint.p2.y = e.offsetY;

            myPaint.ctx.width = myPaint.width;

            myPaint.ctx.height = myPaint.height;

            myPaint.ctx.fillStyle = '#FF0000';

            myPaint.ctx.strokeStyle = '#FF0000';

            var width = Math.abs(myPaint.p1.x-myPaint.p2.x);

            var height = Math.abs(myPaint.p1.y-myPaint.p2.y);

            myPaint.ctx.clearRect(0,0,myPaint.canvas.width,myPaint.canvas.height);

            myPaint.ctx.beginPath();
            if(myPaint.p2.x>=myPaint.p1.x){
                if(myPaint.p2.y>=myPaint.p1.y){
                    myPaint.ctx.rect(myPaint.p1.x,myPaint.p1.y,width,height);
                }else{
                    myPaint.ctx.rect(myPaint.p1.x,myPaint.p1.y,width,-height);
                }
            }else{
                if(myPaint.p2.y>=myPaint.p1.y){
                    myPaint.ctx.rect(myPaint.p1.x,myPaint.p1.y,-width,height);
                }else{
                    myPaint.ctx.rect(myPaint.p1.x,myPaint.p1.y,-width,-height);
                }

            }


            myPaint.ctx.stroke();

            myPaint.ctx.save();

        }

    }

    var  mp = new MyPaint('cav');

    mp.paintRect();

</script>
</body>
</html>

时光飞逝，岁月依然

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
使用canvas画布利用js通过鼠标实现矩形的绘制（任意方向的绘制图形）

使用canvas画布利用js通过鼠标实现矩形的绘制（任意方向的绘制图形）(如果要绘制其他图形，做一点小改动就行了)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style ...
复制链接

扫一扫