初次认识 Canvas

画布的概念

Canvas（画布）可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。画布在 HTML5 中是通过canvas标签来表现，通过 JavaScript 提供的画布 API，我们可以绘制各种各样的图形。

在画布中绘制图形全都是通过 X 轴以及 Y 轴来完成，X 轴与 Y 轴共同组成二维空间点坐标，所有的点组成栅格。与我们一般理解的坐标系不同，画布的原点在左上角，横向是 X 轴；纵向是 Y 轴。如下图：

线性图形

二维画布中，图形分为线性图形和非线性图形，线性图形就是由一条条线段组成的图形。在日常生活中熟知的几何图形：矩形、线段、曲线、圆形等。

线性图形中有一个非常重要的概念——路径，线性图形时一条条线段组成，这里的线段在画布中被定义为路径。路径其实就是线段，绘制路径开头必须有 beginPath()。rect() 函数绘制的矩形是特殊的，它可以不用 beginPath() 起头。所有线性图形在定义好其实点、结束点等一系列操作之后必须调用 stroke() 函数，例如：

ctx.rect(20, 20, 160, 200);
ctx.stroke();

非线性图形

与线性图形相反的就是非线性图形，二维画布中除了可以表示简单的几何图形以外，还可以把图片绘制进画布中，并且还可以操作像素点来绘制图形。非线性图形不需要使用 beginPath() 来开头。

画布的 API

在 JavaScript 世界中，所有的 HTML 标签的顶层接口都是 HTMLElement 来表示，这个接口用来描述标签们公共属性和方法。AudioContext 用于描述 audio 标签，并继承自 HTMLElement。

HTMLCanvasElement

HTMLCanvasElement 继承自 HTMLElement。HTMLElement 提供了 getContext()，用于获取二维画布、三维画布。二维画布的对象是 CanvasRenderingContext2D，其提供了大量的属性和方法来完成图形的绘制。

let canvas = document.getElementById('canvas');
console.dir(canvas);

打印 canvas 标签，原型是 HTMLCanvasElement：

CanvasRenderingContext2D

CanvasRenderingContext2D 对象可为画布提供 2D 渲染上下文。它用于绘制形状，文本，图像和其他对象。

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
console.dir(ctx);

获取 CanvasRenderingContext2D：

属性

属性名	属性值	描述
fillStyle	rgba、rgb、hex	填充颜色
strokeStyle	rgba、rgb、hex	路径颜色
lineCap	"butt" "round" "square"	路径两端样式
lineJoin	"bevel" "round" "miter"	路径连接处的样式
lineWidth	数值类型	路径宽度
textAlign	"start" "left" "center" "end" "right"	文本以 Y 轴为准的排列方式
textBaseline	"top" "bottom" "middle" "alphabetic" "hanging"	文本以 X 轴为准的排列方式
font	符合 CSS font 语法	设置文本字体样式

方法