Canvas 事件

Canvas 作为 HTML 中的元素之一,肯定也是支持 HTML DOM 中的标准事件的

键盘事件

属性 描述
onkeydown 当按下按键时运行脚本
onkeypress 当按下并松开按键时运行脚本
onkeyup 当松开按键时运行脚本

鼠标事件

通过鼠标触发事件, 类似用户的行为

属性 描述
onclick 当单击鼠标时运行脚本
ondblclick 当双击鼠标时运行脚本
ondrag 当拖动元素时运行脚本
ondragend 当拖动操作结束时运行脚本
ondragenter 当元素被拖动至有效的拖放目标时运行脚本
ondragleave 当元素离开有效拖放目标时运行脚本
ondragover 当元素被拖动至有效拖放目标上方时运行脚本
ondragstart 当拖动操作开始时运行脚本
ondrop 当被拖动元素正在被拖放时运行脚本
onmousedown 当按下鼠标按钮时运行脚本
onmousemove 当鼠标指针移动时运行脚本
onmouseout 当鼠标指针移出元素时运行脚本
onmouseover 当鼠标指针移至元素之上时运行脚本
onmouseup 当松开鼠标按钮时运行脚本
onmousewheel 当转动鼠标滚轮时运行脚本
onscroll 当滚动元素的滚动条时运行脚本

鼠标移入移出事件

我们不会针对每个事件写范例

本章节我想演示下 onmouseoveronmouseover 事件

我们可以用这两个事件来触发动画的执行和停止

也就是当鼠标移入 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>

没错,超级简单,短短的几行代码就完成了我们想要的功能

  1. 注册鼠标移入事件,调用 requestAnimationFrame() 开启动画

    c.addEventListener('mouseover', function(e){
      rq = window.requestAnimationFrame(draw);
    });
    
  2. 注册鼠标移出事件,调用 cancelAnimationFrame(rq) 取消动画

    c.addEventListener('mouseout', function(e){
      window.cancelAnimationFrame(rq);
    });
    

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.