JavaScript之Canvas_动力节点Java学院整理

本文主要介绍如何使用Canvas创建具有动态效果的图形和动画。

Canvas介绍

Canvas是HTML5中新增的HTML元素之一，类似于画布，可以在画布上绘制各种图形、动画等。它是基于JavaScript的API实现的，可以使用js代码来操作Canvas。Canvas使用起来相对简单但也有一些坑点需要注意。

Canvas基本用法

1. 创建Canvas

一个Canvas元素可以通过HTML的Canvas标签来创建。通常情况下，我们需要给Canvas元素设置一个id，方便后续通过JavaScript代码获取该元素。

<canvas id="myCanvas"></canvas>

2. 获取Canvas上下文

在使用Canvas之前，我们需要获取Canvas上下文。Canvas支持2D和3D两种上下文，通过getContext()方法可以获取到。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d'); // 获取2D上下文

3. 绘制图形

获取到Canvas上下文之后，我们就可以开始绘制图形了。Canvas提供了一系列API方法，用于绘制各种图形：线条、矩形、弧形、文本等等。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath(); // 开始绘制路径
ctx.moveTo(50, 50); // 移动到起点
ctx.lineTo(100, 100); // 绘制一条线到(100, 100)
ctx.stroke(); // 绘制线条

Canvas动画

Canvas不仅可以绘制静态图形，也可以制作动画效果。实现Canvas动画的基本思路是：通过更新绘制内容和刷新画面来实现动态效果。下面我们来看看如何使用JavaScript实现基本的Canvas动画。

1. 使用setInterval()方法实现

setInterval()方法可以周期性地调用一个函数。我们可以在函数中更新绘制内容并重绘画面，就可以实现动态效果。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var x = 0;
var y = 50;

setInterval(function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 每次更新前清空画布
  ctx.fillRect(x, y, 50, 50); // 绘制矩形
  x += 5;
}, 50); // 每隔50ms执行一次函数

2. 使用requestAnimationFrame()方法实现

requestAnimationFrame()方法是一种更为先进的动画绘制方式，使用它可以提高动画性能和流畅度。它比setInterval()方法更智能，使用时不需要设定时间间隔，而是由系统自己调整帧率。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var x = 0;
var y = 50;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, y, 50, 50);
  x += 5;

  requestAnimationFrame(draw); // 递归调用自己，用于不断重绘画面
}

draw(); // 调用函数开始绘制画面

示例说明

示例1：绘制心形图案

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#ff69b4';
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fill();

该示例中，我们使用Canvas的bezierCurveTo()方法来绘制贝塞尔曲线，绘制了一个心形图案。

示例2：制作气泡动画

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var bubbles = [];

function Bubble(x, y) {
  var size = Math.random() * 30 + 10; // 气泡大小随机
  var life = Math.random() * 100 + 100; // 气泡存在时间随机
  this.x = x;
  this.y = y;
  this.size = size;
  this.life = life;
  this.alpha = 1;

  this.draw = function() {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255, 255, 255, ' + this.alpha + ')';
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
  }

  this.update = function() {
    this.y -= Math.random() * 2 + 1; // 气泡上升速度随机
    this.alpha -= 0.01; // 每次更新透明度下降
    this.life--;
  }
}

setInterval(function() {
  var x = Math.random() * canvas.width;
  var b = new Bubble(x, canvas.height);
  bubbles.push(b);
}, 200); // 每隔200ms随机添加气泡

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 遍历气泡数组，逐个绘制和更新
  for(var i = 0; i < bubbles.length; i++) {
    bubbles[i].draw();
    bubbles[i].update();
    if(bubbles[i].life <= 0) {
      bubbles.splice(i, 1); // 移除生命周期已经用尽的气泡
    }
  }

  requestAnimationFrame(draw);
}

draw(); // 调用函数开始绘制画面

该示例中，我们使用Canvas的arc()方法绘制了很多气泡，并通过更新透明度和位置来制作了气泡上升的动画效果。