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
<div id="box">
<div class="btn">
<!-- 控制：使用方向键移动 -->
<div>
<button type="button" onclick="changeType('drag')">拖动</button>
<button type="button" onclick="changeType('control')">控制</button>
</div>
<div>
当前模式：
<span id="text">drag</span>
</div>
</div>
<canvas id="canvas" width="500" height="500" style="border:1px solid red">
浏览器不支持canvas
</canvas>
</div>
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);
};
}
}
