zoukankan      html  css  js  c++  java
  • Canvas 事件绑定|Canvas事件处理

    一、Canvas事件绑定说明

    canvas元素和CanvasRenderingContext2D 上下文对象,处理的是位图、像素数据,只有一个标签。

    所有的交互,判断处理都是针对cavans标签的。

    对于交互性要求比较高的应用场景推荐使用svg矢量图模式。

    canvas交互逻辑需要自己编码处理,当点击事件发生时,重绘所有图形。 时间对接方法有:isPointInPath(), isPontInStore().

    isPontInPath()

    context.isPointInPath(x, y);
    context.isPointInPath(x, y, fillRule);

    此方法返回Boolean值。

    参数
    各个参数含义和作用如下:

    xNumber
    用来检测的点的横坐标。
    yNumber
    用来检测的点的纵坐标。
    fillRuleString
    填充规则。用来确定一个点实在路径内还是路径外。可选值包括:
    nonzero:非零规则,此乃默认规则。
    evenodd:奇偶规则。

    isPointInStore()

    context.isPointInStroke(x, y);
    context.isPointInStroke(path, x, y);

    此方法返回Boolean值。

    参数
    各个参数含义和作用如下:

    xNumber
    用来检测的点的横坐标。
    yNumber
    用来检测的点的纵坐标。
    pathObject
    指Path2D对象。

    二、 Canvas 事件绑定示例

    1. 鼠标划线

        <canvas id="canvasOne" style="border:1px solid red;" width="500" height="300"></canvas>
    
        <script>
            var canvas = document.querySelector('canvas');
            var ctx = canvas.getContext('2d');
            var isMove = false;
            //鼠标事件
            canvas.onmousedown = function (e) {
                var x = e.clientX;
                var y = e.clientY;
                ctx.moveTo(x, y);
    
                isMove = true;
            }
            canvas.onmousemove = function (e) {
                var x = e.clientX;
                var y = e.clientY;
                if (isMove) {
                    ctx.lineTo(x, y);
                    ctx.stroke();
                }
            }
    
            canvas.onmouseup = function (e) {
                isMove = false;
            }
        </script>

    2.可移动的矩形

        <canvas id="canvasOne" style="border:1px solid red;" width="500" height="300"></canvas>
    
        <script>
            var canvas = document.querySelector('canvas');
            var ctx = canvas.getContext('2d');
    
            ctx.rect(100, 100, 100, 100);
            ctx.fill();
    
            var isMove = false;
            var spanX = 0, spanY = 0;
            var lastX=100,lastY=100;
            //鼠标事件
            canvas.onmousedown = function (e) {
                var x = e.clientX;
                var y = e.clientY;
                ctx.moveTo(x, y);
    
                spanX = x - lastX;
                spanY = y - lastY;
                isMove = true;
            }
            canvas.onmousemove = function (e) {
                var x = e.clientX;
                var y = e.clientY;
                // if ( ctx.isPointInPath(x, y)) {
                //     ctx.fillStyle = 'red';
                //     ctx.fill();
                // }else{
                //     ctx.fillStyle = 'black';
                //     ctx.fill();
                // }
    
    
                if (isMove) {
                    if (ctx.isPointInPath(x, y)) {
                        lastX=x-spanX;
                        lastY=y-spanY;
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.beginPath();
                        ctx.rect(lastX,lastY, 100, 100);
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            }
    
            canvas.onmouseup = function (e) {
                isMove = false;
            }
        </script>

    更多:

    CanvasRenderingContext2D 整理 

    HTMLCanvasElement 整理  

    Canvas 实现圆圈进度展示/进度动画  

  • 相关阅读:
    @Order
    uri和url , 以及末尾加不加 '/'
    windows删除右键新建多余选项
    Typora 指南
    常见状态码/HttpStatusCode
    final 修饰符
    4. shiro-整合redis
    springboot 整合mybatis 一级缓存失效
    springboot查看具体访问的url片段
    JavaSE:NIO
  • 原文地址:https://www.cnblogs.com/tianma3798/p/13940818.html
Copyright © 2011-2022 走看看