利用Canvas繪製高性能動畫效果

一、Canvas簡介

Canvas是HTML5中的一項標準，可以用來繪製圖形，創建動畫等。它是一個可編程的2D圖形庫，可以在網頁上使用JavaScript進行操作。相比其他繪圖庫，Canvas有很多優點，比如：快速響應用戶的交互操作、高性能繪製、支持動畫等。

在使用Canvas之前，需要在HTML文檔中創建一個Canvas元素：

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

通過JavaScript可以獲取到Canvas上下文：

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

通過getContext方法，我們可以獲取到一個CanvasRenderingContext2D對象。通過這個對象，可以調用很多繪製函數來繪製圖形、文本等。

二、繪製矩形和圓形

繪製矩形和圓形是Canvas中最基礎的操作，我們可以使用CanvasRenderingContext2D對象提供的函數來實現。

繪製矩形：

// 繪製矩形
ctx.fillStyle = '#FF0000'; // 設置顏色
ctx.fillRect(10, 10, 100, 100); // 填充矩形

繪製圓形：

// 繪製圓形
ctx.beginPath(); // 開始路徑
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 繪製圓形
ctx.closePath(); // 結束路徑
ctx.fillStyle = '#FF0000'; // 設置顏色
ctx.fill(); // 填充

canvas提供了非常豐富的圖形繪製函數，在這裡就不一一列舉。更加詳細的信息可以查看MDN的文檔。

三、創建動畫

利用Canvas可以創建很炫酷的動畫效果，而且還可以保持高性能。這裡，我們將使用Canvas繪製一些隨機運動的圓形。

繪製圓形：

var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 50;

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

draw();

上面的代碼可以在Canvas上畫出一個圓形，現在我們需要讓它動起來。我們可以使用requestAnimationFrame來實現。

創建動畫：

var dx = 2; // 水平移動距離
var dy = -2; // 垂直移動距離

function animate() {
  requestAnimationFrame(animate);

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

  x += dx;
  y += dy;

  if (x + radius > canvas.width || x - radius  canvas.height || y - radius < 0) {
    dy = -dy;
  }
}

animate();

上面的代碼中，我們使用animate函數不斷地調用requestAnimationFrame方法，然後清空Canvas上的內容、重新繪製圓形並且每次改變位置。當圓形碰到邊界時，我們需要改變它的方向，使得圓形一直在Canvas中運動。

四、處理高清屏幕

在高清屏幕上，Canvas的像素必須是偶數，否則會造成圖片模糊或者顯示不全。為了保證高清屏幕上的效果，我們需要對Canvas進行相應的處理。

高清屏幕處理：

var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
                        ctx.mozBackingStorePixelRatio ||
                        ctx.msBackingStorePixelRatio ||
                        ctx.oBackingStorePixelRatio ||
                        ctx.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;

canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.style.width = canvas.offsetWidth + 'px';
canvas.style.height = canvas.offsetHeight + 'px';
ctx.scale(ratio, ratio);

在上面的代碼中，我們首先獲取Canvas的像素比例，然後通過像素比例來縮放Canvas。這樣就可以在高清屏幕上達到更好的展示效果。

五、總結

Canvas是一個非常強大的2D圖形庫，可以用來創建高性能、炫酷的動畫效果。在使用Canvas時，我們需要注意Canvas的坐標系、繪製函數、創建動畫的方法等。同時在高清屏幕上的處理也需要格外注意。

下面是完整的代碼：

<html>
  <head>
    <style>
      canvas {
        border: 1px solid #d3d3d3;
      }
    </style>
  </head>
  <body>
    <h1>利用Canvas繪製高性能動畫效果</h1>
    <canvas id="myCanvas" width="300" height="150"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');

      // 處理高清屏幕
      var devicePixelRatio = window.devicePixelRatio || 1;
      var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
                              ctx.mozBackingStorePixelRatio ||
                              ctx.msBackingStorePixelRatio ||
                              ctx.oBackingStorePixelRatio ||
                              ctx.backingStorePixelRatio || 1;
      var ratio = devicePixelRatio / backingStoreRatio;

      canvas.width = canvas.offsetWidth * ratio;
      canvas.height = canvas.offsetHeight * ratio;
      canvas.style.width = canvas.offsetWidth + 'px';
      canvas.style.height = canvas.offsetHeight + 'px';
      ctx.scale(ratio, ratio);

      // 繪製圓形
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 50;

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

      draw();

      // 創建動畫
      var dx = 2;
      var dy = -2;

      function animate() {
        requestAnimationFrame(animate);

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

        x += dx;
        y += dy;

        if (x + radius > canvas.width || x - radius  canvas.height || y - radius < 0) {
          dy = -dy;
        }
      }

      animate();
    </script>
  </body>
</html>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/194761.html