html5中canvas获取鼠标交互坐标演示

<body>
    <div style="position:absolute; left:0; top:0; width:800px;height:400px; display:flex;">
        <canvas id="canvas" style="margin:120px; border:1px solid red;"></canvas>
        <div id="textview" style="border:1px solid #f93; width:300px; height:200px; overflow:auto;">
        </div>
    </div>
    <script>
        window.onload = function () {
            new MouseClickListener();
        };

        class MouseClickListener {
            constructor() {
                this.textview = document.getElementById("textview");
                this.textview.innerHTML="canvas的margin:120px";

                this.canvas = document.getElementById('canvas');
                this.canvas.width = 200;
                this.canvas.height = 150;
                this.canvas.addEventListener("click", this.clickCallback.bind(this));
            }

            clickCallback(event) {
                let mx = event.clientX; // 相对于document的位置
                let my = event.clientY;
                console.log("相对于可视document x=" + mx + ", y=" + my);

                let rect = this.canvas.getBoundingClientRect(); // 这里无需再考虑margin
                let dx = mx - rect.left;
                let dy = my - rect.top;
                console.log("canvas x=" + dx + ", y=" + dy);

                this.textview.innerHTML += "<br/>canvas点击位置 x=" + dx + ", y=" + dy;
                this.textview.scrollTop = this.textview.scrollHeight;

                // let x = dx * this.canvas.width / rect.width;
                // let y = dy * this.canvas.height / rect.height;
                // console.log("canvas x=" + x + ", y=" + y);
            }
        }
    </script>
</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<body>

</div>

window.onload = function () {

new MouseClickListener();

};

class MouseClickListener {

constructor() {

this.textview = document.getElementById("textview");

this.textview.innerHTML="canvas的margin:120px";

this.canvas = document.getElementById('canvas');

this.canvas.width = 200;

this.canvas.height = 150;

this.canvas.addEventListener("click", this.clickCallback.bind(this));

}

clickCallback(event) {

let mx = event.clientX; // 相对于document的位置

let my = event.clientY;

console.log("相对于可视document x=" + mx + ", y=" + my);

let rect = this.canvas.getBoundingClientRect(); // 这里无需再考虑margin

let dx = mx - rect.left;

let dy = my - rect.top;

console.log("canvas x=" + dx + ", y=" + dy);

this.textview.innerHTML += "<br/>canvas点击位置 x=" + dx + ", y=" + dy;

this.textview.scrollTop = this.textview.scrollHeight;

// let x = dx * this.canvas.width / rect.width;

// let y = dy * this.canvas.height / rect.height;

// console.log("canvas x=" + x + ", y=" + y);

}

</script>

</body>

class Ball {

    constructor(canvas, paint, x, y, radius) {
        this.canvas = canvas;
        this.paint = paint;
        this.paint.fillStyle = 'purple';
        this.x = x;
        this.y = y;
        this.radius = radius;
    }

    /**
     * 绘制
     */
    draw() {
        this.paint.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.paint.beginPath();
        this.paint.arc(this.x, this.y, this.radius, 0, 360, false);
        this.paint.fill();
        this.paint.closePath();
    }

    /**
     * 是否被点击
     * @param x_mouse  鼠标位置
     * @param y_mouse  鼠标位置
     * @returns true-点击了，false-未点击
     */
    isClicked(x_mouse, y_mouse) {
        let dist = Math.sqrt((x_mouse - this.x) ** 2 + (y_mouse - this.y) ** 2);
        return dist <= this.radius;
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

class Ball {

constructor(canvas, paint, x, y, radius) {

this.canvas = canvas;

this.paint = paint;

this.paint.fillStyle = 'purple';

this.x = x;

this.y = y;

this.radius = radius;

}

/**

* 绘制

*/

draw() {

this.paint.clearRect(0, 0, this.canvas.width, this.canvas.height);

this.paint.beginPath();

this.paint.arc(this.x, this.y, this.radius, 0, 360, false);

this.paint.fill();

this.paint.closePath();

}

/**

* 是否被点击

* @param x_mouse 鼠标位置

* @param y_mouse 鼠标位置

* @returns true-点击了，false-未点击

*/

isClicked(x_mouse, y_mouse) {

let dist = Math.sqrt((x_mouse - this.x) ** 2 + (y_mouse - this.y) ** 2);

return dist <= this.radius;

}

class MouseEventListener{
    constructor(canvas){
        this.target = canvas;
        this.funcMap = new Map();
    }

    addListener(e, func){
        this.funcMap.set(e, func);
        this.target.addEventListener(e, this.onE.bind(this));
    }

    onE(event){
        let x_doc = event.clientX; // 相对于document的位置
        let y_doc = event.clientY; 
        let rect = this.target.getBoundingClientRect(); // 这里无需再考虑margin
        let x = x_doc - rect.left;
        let y = y_doc - rect.top;
        
        let type = event.type;
        let func =  this.funcMap.get(type);
        if (null != func) {
            func(x, y);
        }
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

class MouseEventListener{

constructor(canvas){

this.target = canvas;

this.funcMap = new Map();

}

addListener(e, func){

this.funcMap.set(e, func);

this.target.addEventListener(e, this.onE.bind(this));

}

onE(event){

let x_doc = event.clientX; // 相对于document的位置

let y_doc = event.clientY;

let rect = this.target.getBoundingClientRect(); // 这里无需再考虑margin

let x = x_doc - rect.left;

let y = y_doc - rect.top;

let type = event.type;

let func = this.funcMap.get(type);

if (null != func) {

func(x, y);

}

<body>
    <canvas id="canvas" style="border:1px solid red;"></canvas>
    <script src="Ball.js"></script>
    <script src="MouseEventListener.js"></script>
    <script>
        window.onload = function () {
            new Cinema();
        };

        class Cinema {
            constructor() {
                this.canvas = document.getElementById('canvas');
                this.canvas.width = 300;
                this.canvas.height = 300;
                this.paint = this.canvas.getContext('2d');

                this.x_ball = 150;
                this.y_ball = 120;
                this.r_ball = 20;
                this.ball = new Ball(this.canvas, this.paint,  this.x_ball,  this.y_ball,  this.r_ball);
                this.ball.draw();

                // this.canvas.addEventListener("click", this.onClick.bind(this));
                let meListener = new MouseEventListener(this.canvas);
                meListener.addListener("click", this.onClick.bind(this));
                meListener.addListener("mousemove", this.onMouseMove.bind(this));
            }

            onClick(x, y){
                console.log("点击canvas x=" + x + ", y=" + y);
                let is_c = this.ball.isClicked(x, y);
                if(is_c){
                    console.log("小球被点击了");
                }
            }

            onMouseMove(x, y){
                // console.log("鼠标移动canvas x=" + x + ", y=" + y);
            }
        }
    </script>
</body>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<body>

window.onload = function () {

new Cinema();

};

class Cinema {

constructor() {

this.canvas = document.getElementById('canvas');

this.canvas.width = 300;

this.canvas.height = 300;

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

this.x_ball = 150;

this.y_ball = 120;

this.r_ball = 20;

this.ball = new Ball(this.canvas, this.paint, this.x_ball, this.y_ball, this.r_ball);

this.ball.draw();

// this.canvas.addEventListener("click", this.onClick.bind(this));

let meListener = new MouseEventListener(this.canvas);

meListener.addListener("click", this.onClick.bind(this));

meListener.addListener("mousemove", this.onMouseMove.bind(this));

}

onClick(x, y){

console.log("点击canvas x=" + x + ", y=" + y);

let is_c = this.ball.isClicked(x, y);

if(is_c){

console.log("小球被点击了");

}

onMouseMove(x, y){

// console.log("鼠标移动canvas x=" + x + ", y=" + y);

}

</script>

</body>

威格灵

1.canvas上的鼠标点击位置

2.点击小球