使用Canvas技術展示生動的圖形動畫

Canvas是HTML5的一個新特性，它可以用於在網頁上動態展示圖形動畫，比如製作遊戲、數據可視化或圖表等。

一、Canvas基礎知識

Canvas是HTML5中的一個標籤，它可以通過JavaScript腳本進行操作。創建一個Canvas元素很簡單：

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

然後通過JavaScript選中這個元素，並獲取繪圖上下文：

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

其中，getContext()方法用於獲取繪圖上下文，指定的參數表示繪圖模式，這裡使用2d模式。獲取到了繪圖上下文之後，就可以開始進行繪圖操作了。

二、Canvas繪圖操作

繪圖操作是Canvas的重頭戲，可以使用它來繪製直線、矩形、圓形、曲線、文本等等。下面是幾個基本的繪圖操作：

1. 繪製矩形

使用fillRect()方法或strokeRect()方法可以繪製一個矩形，並填充相應的顏色。例如：

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);

這段代碼將會在Canvas上繪製一個紅色的矩形，左上角的坐標為(10,10)，寬度為100px，高度為50px。

2. 繪製圓形

使用arc()方法可以繪製一個圓形，在其基礎上我們還可以繪製其他各種形狀。例如：

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2*Math.PI);
ctx.stroke();

這段代碼將會在Canvas上繪製一個半徑為50px的圓形，中心坐標為(100,75)。

3. 繪製文本

使用fillText()方法或strokeText()方法可以在Canvas上繪製文本。例如：

ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

這段代碼將會在Canvas上繪製一個字號為30px的Arial字體的“Hello World”文本，起始坐標為(10,50)。

三、使用Canvas製作動畫

使用Canvas技術可以輕鬆製作出生動的圖形動畫。下面通過一個簡單的例子來展示如何使用Canvas繪製動畫：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var ballRadius = 10;

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI*2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  x += dx;
  y += dy;
  if(x + dx > canvas.width-ballRadius || x + dx  canvas.height-ballRadius || y + dy < ballRadius) {
    dy = -dy;
  }
}

setInterval(draw, 10);

這段代碼將會在Canvas上繪製一個小球，並使其沿着斜線運動。它包含了drawBall()和draw()兩個函數，在draw()函數中，我們不斷的清除canvas，重新繪製小球，改變小球坐標的值，達到動畫效果。使用setInterval()方法，可以使小球每10毫秒鐘更新一次，達到了運動的效果。

四、結論

使用Canvas技術可以展示生動的圖形動畫，可以應用於遊戲、數據可視化、圖表等領域。了解Canvas基礎知識和繪圖操作，能夠開發出更加實用、生動的Canvas應用程序。