Canvas API-CanvasRenderingContext2D相关学习（上）

1. 概述

Canvas API 提供了一个通过JavaScript的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

它与 SVG 图像的区别在于，是脚本调用各种方法生成图像，SVG 则是一个 XML 文件，通过各种子元素生成图像。

使用 Canvas API 之前，需要在网页里面新建一个元素。

<canvas id="myCanvas" width="400" height="250">
  您的浏览器不支持 Canvas
canvas>

如果浏览器不支持这个 API，就会显示标签中间的文字：“您的浏览器不支持 Canvas”。

每个元素都有一个对应的CanvasRenderingContext2D对象（上下文对象）。Canvas API 就定义在这个对象上面。

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

上面代码中，元素节点对象的getContext()方法，返回的就是CanvasRenderingContext2D对象。

注意，Canvas API 需要getContext方法指定参数2d，表示该节点生成 2D 的平面图像。如果参数是webgl，就表示用于生成 3D 的立体图案，这部分属于 WebGL API。

2. **CanvasRenderingContext2D**可以绘制形状，文本，图像和其他对象。

Canvas 画布提供了一个作图的平面空间，该空间的每个点都有自己的坐标。原点(0, 0)位于图像左上角，x轴的正向是原点向右，y轴的正向是原点向下。

2.1 绘制形状

绘制矩形

以下是 3 个绘制矩形位图的方法。

• clearRect()

  设置指定矩形区域内（以 点 (x, y) 为起点，范围是*(width, height)* ）所有像素变成透明，并擦除之前绘制的所有内容。

• fillRect()

  绘制填充矩形，矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height。

• strokeRect()

  在 canvas 中，使用当前的笔触样式，描绘一个起点在 (x, y) 、宽度为 w、高度为 h 的矩形。

clearRect()

注：请确保在调用 clearRect()之后绘制新内容前调用beginPath()。

void ctx.clearRect(x, y, width, height);

clearRect() 方法在一个矩形区域内设置所有像素都是透明的 (rgba(0,0,0,0))。这个矩形范围的左上角在 (x, y)，宽度和高度分别由 width 和height确定。

参数：

x:矩形起点的x轴坐标。

y:矩形起点的y轴坐标。

width:矩形的宽度。

height:矩形的高度。

可以用该方法清除一部分画布内容。如下是清除整个画布内容。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, ca