Canvas 2D的全方位阐述

一、基本概念

1、Canvas 2D的引入

Canvas是HTML5中的一个新元素，它是由W3C提出的标准，最初是由Apple公司提出。Canvas可以提供基于像素的绘图系统，支持2D图形，能够呈现任何复杂度的图形，它为开发者提供了直接操作像素的能力。

<canvas id="myCanvas" width="300" height="300"></canvas>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

2、Canvas 2D的核心概念

Canvas 2D的核心概念是：canvas、context、path、stroke和fill。canvas是一个类似画布的东西，context是绘制上下文，它是一个对象，提供一系列方法进行绘图；path是用来构造图形的对象，包括各种直线、曲线和圆弧等；stroke是画线，fill是填充。

ctx.beginPath();  // 开始路径
ctx.moveTo(50, 50);  // 移动起点
ctx.lineTo(200, 200);  // 连接终点
ctx.stroke();  // 画线

二、图形绘制

1、绘制直线

Canvas 2D提供了绘制直线的方法，开发者可以使用moveTo方法指定起点，使用lineTo方法连接终点，使用stroke方法画线。

// 画一条45度的线
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 150);
ctx.stroke();

2、绘制圆弧

Canvas 2D提供了绘制圆弧的方法，开发者可以使用arc方法指定圆心、半径、起始角度和结束角度，使用stroke方法画线，使用fill方法填充。

// 画一个圆
ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2);
ctx.stroke();

// 画一个实心圆
ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2);
ctx.fill();

3、绘制矩形

Canvas 2D提供了绘制矩形的方法，开发者可以使用rect方法指定左上角的坐标和矩形的宽度和高度，使用stroke方法画线，使用fill方法填充。

// 画一个矩形
ctx.strokeRect(100, 100, 100, 100);

// 画一个实心矩形
ctx.fillRect(100, 100, 100, 100);

三、路径绘制

1、绘制路径

Canvas 2D提供了绘制路径的方法，开发者可以使用beginPath方法开始一条路径，使用moveTo方法移动到路径的起点，使用lineTo方法连接路径的每一个点，使用closePath方法关闭路径。

// 画一个四边形
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();

2、填充样式

Canvas 2D提供了填充样式的方法，开发者可以使用fillStyle属性设置填充颜色，也可以使用gradient方法创建渐变色填充。

// 实心矩形
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

// 渐变色矩形
var grd = ctx.createLinearGradient(100, 100, 200, 200);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'blue');
ctx.fillStyle = grd;
ctx.fillRect(100, 100, 100, 100);

四、图像处理

1、绘制图像

Canvas 2D提供了绘制图像的方法，开发者可以使用drawImage方法将图片或者视频等媒体文件绘制到canvas上。

// 将一张图片绘制到canvas上
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};
img.src = 'image.jpg';

2、图像处理

Canvas 2D提供了对图像进行处理的方法，开发者可以使用save方法保存当前状态，使用translate方法移动坐标系，使用rotate方法旋转坐标系，使用scale方法缩放坐标系，使用clip方法进行裁剪。

// 图像处理
ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI / 4);
ctx.scale(2, 2);
ctx.clip();
ctx.drawImage(img, 0, 0);
ctx.restore();

五、文字处理

1、绘制文字

Canvas 2D提供了绘制文字的方法，开发者可以使用fillText方法或者strokeText方法绘制文字。

// 绘制文字
ctx.font = '48px serif';
ctx.fillText('Hello, world!', 10, 50);

2、文字样式

Canvas 2D提供了文字样式的方法，开发者可以使用font属性设置字体大小和字体类型，使用textBaseline属性设置对齐方式。

// 设置文字样式
ctx.font = '48px serif';
ctx.textBaseline = 'middle';
ctx.fillText('Hello, world!', 10, 50);

六、动画处理

1、绘制动画

Canvas 2D提供了绘制动画的方法，开发者可以使用requestAnimationFrame方法创建动画帧。

// 绘制动画
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清楚画布
  ctx.fillRect(x, 50, 50, 50);  // 绘制矩形
  x += 10;  // 更新坐标
  if (x > canvas.width) {
    x = 0;
  }
  requestAnimationFrame(draw);  // 不断绘制
}
var x = 0;
draw();

2、动画处理

Canvas 2D提供了对动画进行处理的方法，开发者可以使用setInterval方法或者setTimeout方法设置动画帧之间的间隔。

// 设置动画帧间隔
setInterval(function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清楚画布
  ctx.fillRect(x, 50, 50, 50);  // 绘制矩形
  x += 10;  // 更新坐标
  if (x > canvas.width) {
    x = 0;
  }
}, 100);

七、总结

Canvas 2D是HTML5中非常重要的一部分，它可以用来绘制各种各样的图形和动画，对于Web开发者来说，Canvas 2D的掌握是非常重要的。

原创文章，作者：FULR，如若转载，请注明出处：https://www.506064.com/n/136642.html