javascript+HTML5的Canvas实现Lab单车动画效果

一、HTML5的Canvas介绍

HTML5的Canvas是一个绘制图形，动画，甚至是音频，视频的工具。它提供了丰富的API，通过控制API，可以构造复杂的web交互和动画效果。在Canvas中，我们可以自由地绘制各种形状、样式、文字等等。

二、实现Lab单车动画效果的步骤

1. 创建Canvas元素

在HTML文件中添加Canvas标签，并设置Canvas的宽度、高度

<canvas id="bike-animation" width="500" height="300"></canvas>

1. 获取Canvas上下文并绘制背景图

在JavaScript代码中获取Canvas元素，并获取上下文。然后，可以在Canvas上下文中绘制图片。

var canvas = document.getElementById("bike-animation");
var ctx = canvas.getContext("2d");
var bgImg = new Image();
bgImg.onload = function() {
  ctx.drawImage(bgImg, 0, 0); // 绘制背景图片
}
bgImg.src = "bg.jpg"; // 设置背景图片路径

1. 创建单车对象

创建单车对象，并设置坐标位置，方向等属性。

var bike = {
  x: 100, // 单车的横坐标
  y: 100, // 单车的纵坐标
  speed: 5, // 单车的速度
  direction: 0, // 单车的方向，0表示向右，1表示向下，2表示向左，3表示向上
  image: new Image(), // 单车的图片
  width: 100, // 单车的宽度
  height: 60, // 单车的高度
  move: function() { // 单车运动的方法
    switch(this.direction) {
      case 0:
        this.x += this.speed;
        break;
      case 1:
        this.y += this.speed;
        break;
      case 2:
        this.x -= this.speed;
        break;
      case 3:
        this.y -= this.speed;
        break;
    }
  }
};
bike.image.src = "bike.png"; // 设置单车图片路径

1. 绘制单车

在Canvas上下文中，利用单车对象中的属性和方法进行单车的绘制。

function drawBike() {
  switch(bike.direction) {
    case 0:
      ctx.drawImage(bike.image, bike.x, bike.y, bike.width, bike.height);
      break;
    case 1:
      ctx.save();
      ctx.translate(bike.x, bike.y);
      ctx.rotate(90*Math.PI/180);
      ctx.drawImage(bike.image, 0, 0, bike.height, bike.width);
      ctx.restore();
      break;
    case 2:
      ctx.save();
      ctx.translate(bike.x+bike.width, bike.y+ bike.height);
      ctx.rotate(180*Math.PI/180);
      ctx.drawImage(bike.image, 0, 0, bike.width, bike.height);
      ctx.restore();
      break;
    case 3:
      ctx.save();
      ctx.translate(bike.x+bike.width, bike.y);
      ctx.rotate(270*Math.PI/180);
      ctx.drawImage(bike.image, 0, 0, bike.height, bike.width);
      ctx.restore();
      break;
  }
}

1. 实现单车的运动

利用Canvas的动画函数requestAnimationFrame实现单车的运动效果。

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  ctx.drawImage(bgImg, 0, 0); // 绘制背景图片
  bike.move(); // 单车运动
  drawBike(); // 绘制单车
  requestAnimationFrame(animate); // 再次调用animate函数
}
animate(); // 开始动画

三、示例说明

1. 示例1：转向运动

在单车对象中添加“turn”方法，用于控制单车的转向。然后在Canvas上下文中，对单车的旋转角度进行判断，从而实现单车的转向运动。示例代码如下：

var bike = {
  // 省略属性和方法
  turn: function(direction) { // 转向方法
    if(direction === "left") {
      this.direction = (this.direction+3)%4;
    } else if(direction === "right") {
      this.direction = (this.direction+1)%4;
    }
  }
};

document.addEventListener("keydown", function(event) {
  switch(event.keyCode) {
    case 37: // 左箭头
      bike.turn("left");
      break;
    case 38: // 上箭头
      bike.direction = 3;
      break;
    case 39: // 右箭头
      bike.turn("right");
      break;
    case 40: // 下箭头
      bike.direction = 1;
      break;
  }
});

1. 示例2：碰撞检测

在单车对象中添加“checkCollision”方法，用于检测单车是否与Canvas的边缘相撞。如果相撞，则反弹回去。示例代码如下：

var bike = {
  // 省略属性和方法
  checkCollision: function() {
    if(this.x <= 0 || this.x+this.width >= canvas.width) {
      this.speed = -this.speed;
      this.turn("right");
    }
    if(this.y <= 0 || this.y+this.height >= canvas.height) {
      this.speed = -this.speed;
      this.turn("left");
    }
  }
};

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(bgImg, 0, 0);
  bike.move();
  bike.checkCollision(); // 碰撞检测
  drawBike();
  requestAnimationFrame(animate);
}
animate();