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 实现圆圈进度展示/进度动画