Canvas 事件
Canvas 作为 HTML 中的元素之一，肯定也是支持 HTML DOM 中的标准事件的
键盘事件
| 属性 | 描述 |
|---|---|
| onkeydown | 当按下按键时运行脚本 |
| onkeypress | 当按下并松开按键时运行脚本 |
| onkeyup | 当松开按键时运行脚本 |
鼠标事件
通过鼠标触发事件, 类似用户的行为
| 属性 | 描述 |
|---|---|
| onclick | 当单击鼠标时运行脚本 |
| ondblclick | 当双击鼠标时运行脚本 |
| ondrag | 当拖动元素时运行脚本 |
| ondragend | 当拖动操作结束时运行脚本 |
| ondragenter | 当元素被拖动至有效的拖放目标时运行脚本 |
| ondragleave | 当元素离开有效拖放目标时运行脚本 |
| ondragover | 当元素被拖动至有效拖放目标上方时运行脚本 |
| ondragstart | 当拖动操作开始时运行脚本 |
| ondrop | 当被拖动元素正在被拖放时运行脚本 |
| onmousedown | 当按下鼠标按钮时运行脚本 |
| onmousemove | 当鼠标指针移动时运行脚本 |
| onmouseout | 当鼠标指针移出元素时运行脚本 |
| onmouseover | 当鼠标指针移至元素之上时运行脚本 |
| onmouseup | 当松开鼠标按钮时运行脚本 |
| onmousewheel | 当转动鼠标滚轮时运行脚本 |
| onscroll | 当滚动元素的滚动条时运行脚本 |
鼠标移入移出事件
我们不会针对每个事件写范例
本章节我想演示下 onmouseover 和 onmouseover 事件
我们可以用这两个事件来触发动画的执行和停止
也就是当鼠标移入 Canvas 时开始动画，移出 Canvas 时停止动画
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-1" width="400" height="200"> </canvas> <script> var c = document.getElementById('canvas-1'); var ctx = c.getContext('2d'); var rq; var ball = { x: 10, y: 10, vx: 5, vy: 2, radius: 10, color: 'blue', draw: function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); } }; function draw() { ctx.fillStyle = 'rgba(255,255,255,0.3)'; ctx.fillRect(0,0,c.width,c.height); ctx.strokeRect(0,0,c.width,c.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; ball.vy *= .99; ball.vy += .25; if (ball.y + ball.vy > c.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > c.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } rq = window.requestAnimationFrame(draw); } ball.draw(); c.addEventListener('mouseover', function(e){ rq = window.requestAnimationFrame(draw); }); c.addEventListener('mouseout', function(e){ window.cancelAnimationFrame(rq); }); </script>
没错，超级简单，短短的几行代码就完成了我们想要的功能
-
注册鼠标移入事件，调用
requestAnimationFrame()开启动画c.addEventListener('mouseover', function(e){ rq = window.requestAnimationFrame(draw); }); -
注册鼠标移出事件，调用
cancelAnimationFrame(rq)取消动画c.addEventListener('mouseout', function(e){ window.cancelAnimationFrame(rq); });