在canvas中，常见的事件共有三种，即鼠标事件、键盘事件和循环事件。有了这些事件，我们可以就可以创建交互性更强的动画。由于鼠标事件 - Web API 接口参考 | MDN (mozilla.org)、键盘事件 KeyboardEvent() - Web API 接口参考 | MDN (mozilla.org)和循环事件（window.requestAnimationFrame - Web API 接口参考 | MDN (mozilla.org)）。都可以在网上查到，这里就不一一叙述了，感兴趣的小伙伴们可以点击链接查看。
鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border: 1px dashed gray;"></canvas>
</body>
<script>
let width = 600;
let height = 600;
window.onload = function () {
//写逻辑
let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
var x = width / 2;
var y = height / 2;
var r = 10;
let colorArr = ['red','orange','yellow','green','teal','blue','purple'];
createBall(x, y, r);
window.addEventListener('mousedown', function (e) {
cxt.clearRect(0, 0, canvas.width, canvas.height);
let x = e.offsetX;
let y = e.offsetY;
createBall(x, y, r);
},false);
function createBall(x, y, r) {
for(let i = 0;i < 7;i++){
cxt.lineWidth = 10;
cxt.beginPath();
cxt.arc(x, y, r, 0, Math.PI * 2, true);
cxt.closePath();
cxt.strokeStyle = colorArr[i];
cxt.stroke();
r += 10;
if(r == 70){
r == 10;
}
}
}
}
</script>
</html>
效果图如下：
键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border: 1px dashed gray;"></canvas>
</body>
<script>
let width = 600;
let height = 600;
window.onload = function () {
//写逻辑
let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
var x = width / 2;
var y = height / 2;
var r = 30;
createBall(x, y, r);
var dir = getDirection();
window.addEventListener('keydown', function () {
//console.log(dir.direction);
cxt.clearRect(0, 0, canvas.width, canvas.height);
switch (dir.direction) {
case 'up':
y -= 10;
createBall(x, y, r);
break;
case 'down':
y += 10;
createBall(x, y, r);
break;
case 'left':
x -= 10;
createBall(x, y, r);
break;
case 'right':
x += 10;
createBall(x, y, r);
break;
default :
createBall(x, y, r);
}
},false);
function getDirection() {
var key = {};
window.addEventListener('keydown', function (e) {
if (e.keyCode == 38 || e.keyCode == 87) {
key.direction = 'up';
}
else if (e.keyCode == 39 || e.keyCode == 68) {
key.direction = 'right';
}
else if (e.keyCode == 40 || e.keyCode == 83) {
key.direction = 'down';
}
else if (e.keyCode == 37 || e.keyCode == 65) {
key.direction = 'left';
}
else {
key.direction = '';
}
}, false);
return key;
}
function createBall(x, y, r) {
cxt.beginPath();
cxt.arc(x, y, r, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fillStyle = "orange";
cxt.fill();
}
}
</script>
</html>
具体效果可粘贴代码自行体验。
循环事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border: 1px dashed gray;"></canvas>
</body>
<script>
let width = 600;
let height = 600;
window.onload = function () {
//写逻辑
let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
var x = 30;
var y = 30;
var r = 30;
(function frame(){
window.requestAnimationFrame(frame);
cxt.clearRect(0,0,width,height);
cxt.beginPath();
cxt.arc(x,y,r,0,Math.PI * 2,true);
cxt.closePath();
cxt.fillStyle = 'skyblue';
cxt.fill();
if(x >= r && x < width -r && y == r){
x += 30;
}
if(x >= width - r && y >= r){
y += 30;
}
if(y >= height - r && x >= r){
x -= 30;
}
if(x <= r && y >= r){
y -= 30;
}
})();
}
</script>
</html>
效果图如下：
