canvas画布笔记 | 易学教程

鼠标事件

Canvas对象支持所有的JavaScript的鼠标事件

canvas.addEventListener("mousedown", doMouseDown, false)
canvas.addEventListener('mousemove', doMouseMove, false)
canvas.addEventListener('mouseup',  doMouseUp, false)
canvas.addEventListener('click',  doMouseUp, false)

canvas.onmousedown = e=>{} 这种是反模式，不可扩展，所以不要用这种写法

计算鼠标在Canvas对象上坐标

Canvas上鼠标事件中所获取的都是基于整个屏幕的坐标。通过canvas. getBoundingClientRect()来获取Canvas对象包围盒相对屏幕的相对位置，通过计算

得到鼠标在Canvas的坐标

function getPointOnCanvas(e) {
    let x=e.clientX, y=e.clientY
    let bbox =canvas.getBoundingClientRect();

    return { 
        x: x- bbox.left * (canvas.width / bbox.width),
        y: y - bbox.top  * (canvas.height / bbox.height)
    }
}

键盘事件

HTML5 Canvas本身不支持键盘事件监听与获取，通过windows对象来实现Canvas键盘事件监听与处理

window.addEventListener('keydown', doKeyDown, true)

拖尾

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");


     var a = {
              x:20,y:20
            };

            function draw() {
              mask();
              ctx.save();
              ctx.fillStyle = 'red';
              ctx.beginPath();
              ctx.arc(a.x,a.y, 2, 0, Math.PI*2);
              ctx.fill();
              ctx.restore();
              move();
              //setTimeout(draw,1000)
              requestAnimationFrame(draw)
            }

            function mask(){
                ctx.save();        
                ctx.globalCompositeOperation = 'destination-in';
                ctx.fillStyle="rgba(0,0,0,0.5)"
                ctx.fillRect(0,0,canvas.width,canvas.height); 
                ctx.restore();
            }

            function move(){
               a.x += 2;
               a.y += 2;
               if(a.y > 500){
                 a.y = 20;
                 a.x = 20;
               }
            }
            
            draw()

来源：oschina

链接：https://my.oschina.net/cectsky/blog/4333587

标签

html5

javascript