利用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/n/194761.html