Canvas2D介绍及使用指南

发布时间：2023-05-22

一、Canvas2D概述

Canvas2D是HTML5提供的一种画布，通过JavaScript代码将图形和动画绘制到画布中。与SVG相比，Canvas2D更适合于处理游戏、交互图形等复杂的场景。Canvas2D支持基本的2D图形绘制，包括直线、弧线、曲线、文本、图像等。 Canvas2D的坐标系原点在左上角，x轴正方向向右，y轴正方向向下。Canvas2D中的对象包括画布、绘制的图形以及渲染上下文。通过获取渲染上下文，我们可以使用Canvas2D进行图形绘制和操作。

二、绘制图形

1、绘制直线

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath(); // 开始绘制路径
ctx.moveTo(50, 50); // 起点坐标
ctx.lineTo(100, 100); // 终点坐标
ctx.stroke(); // 绘制直线

2、绘制圆形

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath(); // 开始绘制路径
ctx.arc(100, 100, 50, 0, 2*Math.PI); // 坐标、半径、起始角度、终止角度
ctx.stroke(); // 绘制圆形

3、绘制曲线

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath(); // 开始绘制路径
ctx.moveTo(50, 100); // 起点坐标
ctx.quadraticCurveTo(100, 50, 150, 100); // 控制点坐标、终点坐标
ctx.stroke(); // 绘制曲线

4、绘制文本

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.font = '24px Arial'; // 字体大小及类型
ctx.fillText('Hello, Canvas2D!', 50, 100); // 内容及位置

5、绘制图像

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() { // 图像加载完成后进行绘制
  ctx.drawImage(img, 50, 50); // 图像对象及位置
}
img.src = 'example.jpg'; // 图像地址

三、画布操作

1、清空画布

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布

2、保存和恢复画布状态

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.save(); // 保存当前状态
// 对画布进行操作
ctx.restore(); // 恢复之前保存的状态

四、动画效果

1、使用setInterval实现动画

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 0;
setInterval(function() { // 定时执行函数
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, 100, 50, 0, 2*Math.PI);
  ctx.fill();
  x++;
}, 10); // 每10毫秒执行一次

2、使用requestAnimationFrame实现动画

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 0;
function animate() { // 动画函数
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, 100, 50, 0, 2*Math.PI);
  ctx.fill();
  x++;
  requestAnimationFrame(animate); // 递归调用
}
animate(); // 启动动画

五、性能优化

1、使用离屏canvas

// 创建离屏canvas
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 100;
offscreenCanvas.height = 100;
var offscreenCtx = offscreenCanvas.getContext('2d');
// 在离屏canvas上绘制图形
offscreenCtx.beginPath();
offscreenCtx.arc(50, 50, 50, 0, 2*Math.PI);
offscreenCtx.fill();
// 将离屏canvas绘制到页面上的canvas中
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(offscreenCanvas, 0, 0);

2、使用图像缓存

// 创建图像缓存
var imgCache = {};
function getImage(url) { // 获取图像方法
  if(imgCache[url]) { // 如果缓存中有图像，则直接返回
    return imgCache[url];
  } else { // 否则新建Image对象加载图像并存入缓存中
    var img = new Image();
    img.onload = function() {
      imgCache[url] = img;
    }
    img.src = url;
    return img;
  }
}
// 使用图像缓存进行图像绘制
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = getImage('example.jpg');
ctx.drawImage(img, 50, 50);

3、使用缓存区

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
var offscreenCtx = offscreenCanvas.getContext('2d');
// 在缓存区绘制图形
offscreenCtx.beginPath();
offscreenCtx.arc(50, 50, 50, 0, 2*Math.PI);
offscreenCtx.fill();
// 将缓存区绘制到页面上的canvas中
ctx.drawImage(offscreenCanvas, 0, 0);

六、总结

本文对Canvas2D进行了详细的介绍和使用指南，从图形绘制、画布操作、动画效果以及性能优化等方面进行了详细的讲解，并给出了相应的代码示例。Canvas2D的功能强大，可以用于实现各种2D图形和动画效果，希望读者能够通过本文对其有更深入的了解和应用。

推荐文章