Html5 canvas动画，纯js实现对canvas实例对象的鼠标拖动、方向键控制、放大缩小（附完整代码）

contr.gif

一、拖动
所要的鼠标事件mousedown(鼠标按下)、mousemove(鼠标移动)及mouseup(鼠标抬起)
1、设置全局变量

var x = 50 //初始x位置
var y = 50 //初始y位置
var r = 20 //半径
var area = Math.PI*r*r //面积
var step = 5 //速度

2、获取canvas对象

var canvas = document.getElementById("canvas"); //获取canvas对象
var ctx = canvas.getContext("2d"); //创建二维对象

3、方法封装：创建对象实例，每次执行清除一下画布

 // 创建实例
function createBlock(x, y){
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  ctx.restore();
  ctx.beginPath();
  // arc参数分别是（横坐标、纵坐标、半径、起始角（弧度计0.5PI/1PI/1.5PI/2PI）、结束角 、可选（False顺时针，true逆时针））
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.save();
  ctx.fillStyle = "skyblue";
  ctx.fill()
  ctx.stroke(); // 重绘
}

4、鼠标事件，及执行方法，用isPointInPath(x, y)判断鼠标位置是否在圆上（小知识：isPointInPath只能判断最后一个绘制的路径），利用拖动实时计算圆的位置

document.onmousedown = function(evt){ // 鼠标左键按下
  evt = evt || event;
  var eX = evt.clientX - canvas.offsetLeft;
  var eY = evt.clientY - canvas.offsetTop;
  // 按下鼠标判断鼠标位置是否在圆上，当画布上有多个路径时，isPointInPath只能判断最后那一个绘制的路径
  if (evt.which == 1 && ctx.isPointInPath(eX, eY) && type == 'drag'){
    document.onmousemove = function(ev) { // 鼠标拖动
      var e = ev || event;
      var moveX = e.clientX - evt.clientX;
      var moveY = e.clientY - evt.clientY;
      drag(moveX, moveY)
    }
  }
}
document.onmouseup = function(evt) { // 鼠标抬起
  if (evt.which == 1 && type == 'drag'){
    // 保存当前位置
    x = clientX? clientX: x
    y = clientY? clientY: y
    document.onmousemove = null // 取消拖动
  }
}
// 记录位置
var clientX = 0
var clientY = 0
function drag(moveX, moveY){ // 拖动执行
  clientX = getLimitX(x + moveX)
  clientY = getLimitX(y + moveY)
  createBlock(clientX, clientY)
}

5、获取画布的边界，位置改变时不允许超出canvas

// 获取左右边界(包括边框)
function getLimitX(x){
    if (x < r + 1) { //左边界
        x = r + 1
    } else if (x > canvas.width - r - 1) { //右边界
        x = canvas.width - r - 1
    }
    return x
}
// 获取上下边界(包括边框)
function getLimitY(x){
    if (y < r + 1) { //上边界
        y = r + 1
    } else if (y > canvas.height - r - 1) { //下边界
        y = canvas.height - r - 1
    }
    return y    
}

二、方向键控制
所要键盘事件keydown(键盘按下)、keyup(键盘抬起)
1、键盘事件，及执行方法，利用全局变量x，y的自增、自减实时计算圆的位置

var direction = 0
document.addEventListener('keydown', function(evt) { // 键盘按下
    // console.log(evt)
    switch (evt.which) { // 方向键判断
        case 37: // ←left
            direction = -1;
            break;
        case 38: // ↑up
            direction = 2;
            break;
        case 39: // →right
            direction = 1;
            break;
        case 40: // ↓down
            direction = -2;
            break;
    }
    document.addEventListener('keyup', function(evt) { // 键盘抬起
        if ((evt.which == 37 || evt.which == 38 && direction || evt.which == 39 || evt.which == 40) && direction) {
            direction = 0;
        }
    });
});
function animation() {
    if (direction == -1) {
        // console.log('左移')
        x -= step
    } else if (direction == 1) {
        // console.log('右移')
        x += step
    } else if (direction == 2) {
        // console.log('上移')
        y -= step
    } else if (direction == -2) {
        // console.log('下移')
        y += step
    }
    x = getLimitX(x)
    y = getLimitX(y)
    createBlock(x, y)
    if(type == 'control'){
        //执行的动画帧
        requestAnimationFrame(animation);
    }
}

2、兼容性支持，判断requestAnimationFrame动画帧数方法是否存在，requestAnimationFrame函数执行次数通常是每秒60次

// 兼容性支持,判断是否存在requestAnimationFrame
function getAnimationFrame() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] +
            'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                    callback(currTime + timeToCall);
                },
                timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }

    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
    }
}

三、放大缩小
所要鼠标事件，鼠标滚轮滚动事件mousewheel，
1、鼠标事件，及执行方法，利用改变圆的面积来重新计算半径r，只在画布内执行

// 鼠标滚轮放大缩小
var scaleFactor = 1.1;
canvas.onmousewheel = function(evt){
    var delta = evt.wheelDelta ? evt.wheelDelta / 40 : evt.detail ? -evt.detail : 0;
    if(delta){
        var scale = Math.pow(scaleFactor, delta); // 放大倍数
        area = scale*area // 放大的面积
        r = Math.sqrt(area/Math.PI) // 重新计算半径s=πr²
        createBlock(x, y); // 重绘
    }
}

四、完整代码
1、css

* {
    margin: 0;
    padding: 0;
}
#box {
    width: fit-content;
    margin: 0 auto;
    margin-top: 20px;
}
.btn{
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}
#text{
    color: blue;
}

2、html

    

        
        

            拖动
            控制
        
        

            当前模式：
            drag
        
    
    
        浏览器不支持canvas
    

3、js

getAnimationFrame()
var type = 'drag'

function changeType(val) {
    type = val
    var el = document.getElementById('text')
    el.innerText = val
    if (type == 'control') {
        requestAnimationFrame(animation);
    }
}

var x = 50 //初始x位置
var y = 50 //初始y位置
var r = 20 //半径
var area = Math.PI * r * r //面积
var step = 5 //速度
var canvas = document.getElementById("canvas"); //获取canvas对象
var ctx = canvas.getContext("2d"); //创建二维对象


//动画
function animation() {
    if (direction == -1) {
        // console.log('左移')
        x -= step
    } else if (direction == 1) {
        // console.log('右移')
        x += step
    } else if (direction == 2) {
        // console.log('上移')
        y -= step
    } else if (direction == -2) {
        // console.log('下移')
        y += step
    }
    x = getLimitX(x)
    y = getLimitX(y)
    createBlock(x, y)
    if (type == 'control') {
        //这里写要执行的动画
        requestAnimationFrame(animation);
    }
}

// 获取左右边界(包括边框)
function getLimitX(x) {
    if (x < r + 1) { //左边界
        x = r + 1
    } else if (x > canvas.width - r - 1) { //右边界
        x = canvas.width - r - 1
    }
    return x
}
// 获取上下边界(包括边框)
function getLimitY(x) {
    if (y < r + 1) { //上边界
        y = r + 1
    } else if (y > canvas.height - r - 1) { //下边界
        y = canvas.height - r - 1
    }
    return y
}
// 创建实例
function createBlock(x, y) {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    ctx.globalCompositeOperation = "saturation";
    ctx.restore();
    ctx.beginPath();
    // arc参数分别是（横坐标、纵坐标、半径、起始角（弧度计0.5PI/1PI/1.5PI/2PI）、结束角 、可选（False顺时针，true逆时针））
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.save();
    // 设置阴影
    ctx.fillStyle = "skyblue";
    ctx.fill()
    ctx.stroke(); // 重绘
}
createBlock(x, y)
var direction = 0
//键盘监听事件
document.addEventListener('keydown', function(evt) { // 键盘按下
    switch (evt.which) { // 方向键判断
        case 37: // ←left
            direction = -1;
            break;
        case 38: // ↑up
            direction = 2;
            break;
        case 39: // →right
            direction = 1;
            break;
        case 40: // ↓down
            direction = -2;
            break;
    }
    document.addEventListener('keyup', function(evt) { // 键盘抬起
        if ((evt.which == 37 || evt.which == 38 && direction || evt.which == 39 || evt.which == 40) && direction) {
            direction = 0;
        }
    });
});
document.onmousedown = function(evt) { // 鼠标左键按下
    evt = evt || event;
    var eX = evt.clientX - canvas.offsetLeft;
    var eY = evt.clientY - canvas.offsetTop;
    // 按下鼠标判断鼠标位置是否在圆上，当画布上有多个路径时，isPointInPath只能判断最后那一个绘制的路径
    // console.log(ctx.isPointInPath(eX, eY))
    if (evt.which == 1 && ctx.isPointInPath(eX, eY) && type == 'drag') {
        document.onmousemove = function(ev) { // 鼠标拖动
            var e = ev || event;
            var moveX = e.clientX - evt.clientX;
            var moveY = e.clientY - evt.clientY;
            drag(moveX, moveY)
        }
    }
}
document.onmouseup = function(evt) { // 鼠标抬起
    if (evt.which == 1 && type == 'drag') {
        // 保存当前位置
        x = clientX ? clientX : x
        y = clientY ? clientY : y
        document.onmousemove = null // 取消拖动
    }
}
var clientX = 0
var clientY = 0

function drag(moveX, moveY) { // 拖动执行
    clientX = getLimitX(x + moveX)
    clientY = getLimitX(y + moveY)
    createBlock(clientX, clientY)
}
// 鼠标滚轮放大缩小
var scaleFactor = 1.1;
canvas.onmousewheel = function(evt) {
    var delta = evt.wheelDelta ? evt.wheelDelta / 40 : evt.detail ? -evt.detail : 0;
    if (delta) {
        var scale = Math.pow(scaleFactor, delta); // 放大倍数
        area = scale * area // 放大的面积
        r = Math.sqrt(area / Math.PI) // 重新计算半径s=πr²
        createBlock(x, y); // 重绘
    }
}
// 兼容性支持,判断是否存在requestAnimationFrame
function getAnimationFrame() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] +
            'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                    callback(currTime + timeToCall);
                },
                timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }

    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
    }
}