• 《canvas》之第13章 事件操作

    《canvas》之第13章 事件操作

    第13章 事件操作

    13.1 canvas进阶简介

    canvas api + JavaScript。

    13.2 鼠标事件

    13.2.1 鼠标事件简介

    • 鼠标按下，mousedown
    • 鼠标松开，mouseup
    • 鼠标移动，mousemove

    拖动效果实现，mousedown判断选中图形或元素，mousemove拖动选中图形或元素，mouseup停止拖动。

    13.2.2 获取鼠标指针位置

    鼠标指针在画布上的相对坐标。

    • pageX，pageY与clientX，clientY。
      鼠标指针当前位置属性。

    • element.offsetLeft，element.offsetTop。
      元素的偏移位置。

    • tools.js

    //定义工具函数集
window.tools = {};
//获取鼠标当前位置（相对坐标）
window.tools.getMouse = function (element) {
    var mouse = { x: 0, y: 0 };
    element.addEventListener("mousemove", function (e) {
        var x, y;
        var e = e || window.event;//IE中，event对象是window的一个属性
        if (e.pageX || e.pageY) {//兼容Firefox、chrome、IE9及以上
            x = e.pageX;
            y = e.pageY;
        }
        else {//兼容混杂模式下safari、chrome，IE8及以下
            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }

		//减去canvas偏移，获取canvas中相对坐标值
        x -= element.offsetLeft;
        y -= element.offsetTop;

        mouse.x = x;
        mouse.y = y;
    }, false);
    return mouse;
}

    • 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
    • 鼠标移动事件
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="js/tools.js"></script>
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var txt = $$("txt");
            var mouse = tools.getMouse(cnv);

            cnv.addEventListener("mousemove", function () {
                txt.innerHTML = "鼠标当前坐标为：（" + mouse.x + "," + mouse.y + "）";
            }, false);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
    <p id="txt"></p>
</body>
</html>

    • 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

    13.3 键盘事件

    13.3.1 键盘事件简介

    • 键盘松下，keydown
    • 键盘松开，keyup

    canvas元素不支持键盘事件，通过window对象实现canvas中键盘事件的监听。

    window.addEventListener(type, fn, false)

    • 1
    • type，事件类型
    • fn，事件处理函数
    • false（默认可省略），false：冒泡，从里到外，true：捕获，从外到里。

    13.3.2 获取物体移动方向

    • 常用按键对应keyCode
    按键keyCode
    W上87
    S下83
    A左65
    D右68
    ↑38
    ↓40
    ←37
    →39
    //获取键盘控制方向
window.tools.getKey = function () {
    var key = {};
    window.addEventListener("keydown", function (e) {
        if (e.keyCode == 38 || e.keyCode == 87) {
            key.direction = "up";
        } else if (e.keyCode == 39 || e.keyCode == 68) {
            key.direction = "right";
        } else if (e.keyCode == 40 || e.keyCode == 83) {
            key.direction = "down";
        } else if (e.keyCode == 37 || e.keyCode == 65) {
            key.direction = "left";
        } else {
            key.direction = "";
        }
    }, false);
    return key;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 键盘事件
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="js/tools.js"></script>
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //初始化一个圆形
            drawBall(cnv.width / 2, cnv.height / 2);
            //初始化变量
            var x = 100;
            var y = 75;
            //获取按键方向
            var key = tools.getKey();

            //添加鼠标按下事件
            window.addEventListener("keydown", function (e) {
                //清除整个Canvas，以便重绘新的圆形
                cxt.clearRect(0, 0, cnv.width, cnv.height);

                //根据key.direction的值，判断小球移动方向
                switch (key.direction) {
                    case "up":
                        y -= 2;
                        break;
                    case "down":
                        y += 2;
                        break;
                    case "left":
                        x -= 2;
                        break;
                    case "right":
                        x += 2;
                        break;
                };
                drawBall(x, y);
            }, false);

            //定义绘制小球的函数
            function drawBall(x, y) {
                cxt.beginPath();
                cxt.arc(x, y, 20, 0, 360 * Math.PI / 180, true);
                cxt.closePath();
                cxt.fillStyle = "#6699FF";
                cxt.fill();
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>

    • 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
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    13.4 循环事件

    setInterval()方法不能准确控制动画的帧率，需手动设置间隔时间。requestAnimationFrame()方法无需手动设置间隔时间，回根据浏览器绘制帧率自动调整。

    (function frame(){
	window.requestAnimationFrame(frame); //不断调用frame()函数
	cxt.clearRect(0, 0, cnv.width, cnv.height);
})(); //自执行函数frame()

    • 1
    • 2
    • 3
    • 4
    //动画循环，兼容各大浏览器
window.requestAnimationFrame = (
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function (callback) {
        return window.setTimeout(callback, 1000 / 60);
    }
);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 循环事件
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="js/tools.js"></script>
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //初始化变量，也就是初始化圆的X轴坐标为0
            var x = 0;
            //动画循环
            (function frame() {
                window.requestAnimationFrame(frame);
                //每次动画循环都先清空画布，再重绘新的图形
                cxt.clearRect(0, 0, cnv.width, cnv.height);

                //绘制圆
                cxt.beginPath();
                cxt.arc(x, 70, 20, 0, 360 * Math.PI / 180, true);
                cxt.closePath();
                cxt.fillStyle = "#6699FF";
                cxt.fill();

                //变量递增
                x += 2;
            })();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>

    • 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
  • 相关阅读:
    飞桨模型部署至docker并使用FastAPI调用（一）-docker安装与vscode连接
    [HTML]常用标签的使用
    免费可商用图片素材网站，建议收藏
    LNMP架构&部署Discuz论坛系统
    嵌入式软件中如何排查bug？
    C++unordered_map/set容器实现
    跟着播客学英语-Why I use vim ? part one.
    vscode shadertoy插件，非常方便的glsl着色器编写工具
    零基础做出高端堆叠极环图
    凉鞋的 Unity 笔记 106. 第二轮循环&场景视图&Sprite Renderer
  • 原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125365298