canvas常用API介绍

官方文档：https://www.canvasapi.cn/

1. `Canvas API`

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

在html里的形式是：

<canvas id="canvas"></canvas>

js里：
Document.getElementById() 方法获取HTML <canvas> 元素的引用。接着，HTMLCanvasElement.getContext() 方法获取这个元素的context——图像稍后将在此被渲染。

2. `<canvas>`

<canvas>元素可被用来通过JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。

canvas元素的属性：

属性名	含义	值
height	该元素占用空间的高度	以 CSS 像素（px）表示，默认为 150
width	该元素占用空间的宽度	以 CSS 像素（px）表示，默认为 300
getContext()
toDataURL(type, encoderOptions)	返回一个数据URL，该URL包含由类型参数指定的格式的图像（默认为png）	encoderOptions在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量
toBlob(callback, type, encoderOptions)	回调函数，可获得一个单独的Blob对象参数	其余两个参数含义同上

注意

需要有闭合标签
直接在html标签中设置width和height属性或者使用JavaScript来指定画布尺寸
使用CSS的width和height以在渲染期间缩放图像以适应样式大小，只是让画布缩放而已。

3. `CanvasRenderingContext2D`

通过HTMLCanvasElement.getContext('2d')方法可以获得CanvasRenderingContext2D对象；
可为<canvas>元素的绘图表面提供2D渲染上下文。它用于绘制形状，文本，图像和其他对象。

// html
<canvas id="my-house" width="300" height="300"></canvas>
// js
const canvas = document.getElementById('my-house');
const ctx = canvas.getContext('2d'); // CanvasRenderingContext2D对象

有了CanvasRenderingContext2D上下文对象，就可以绘制自己想要的内容了

先来回顾一下最常用最简单的属性和方法：

线条相关

属性名	作用	默认值
lineWidth	线的宽度	1
lineCap	线末端的类型	butt, round , square(以正方形结尾，视觉上比butt长一点)
lineJoin	两线相交拐点类型	miter, round，bevel
miterLimit	斜接面限制比例	10
setLineDash([])	设置当前的线段样式	数组里的值依次对应虚线的线段和空白的长度，依次重复
lineDashOffset(offset)	从哪里开始绘制线

绘制矩形

属性名	作用	默认值
clearRect	擦除指定矩形区域的内容
fillRect(x, y, width, height)	绘制填充矩形
strokeRect(x, y, width, height)	使用当前的绘画样式，描绘一个矩形

路径

属性名	作用	默认值
beginPath()	清空路径列表，开始一个新的路径
closePath()	使笔点返回到当前自路径的起始点
moveTo(x, y)	将一个新的子路径的起始点移动到指定坐标
lineTo(x, y)	链接到指定坐标
arc(x, y, r, startAngle, endAngle, 是否逆时针)	绘制一段圆弧
arcTo(x1, y1, x2, y2, r)	绘制两个点之间半径为r的圆弧
rect(x, y, width, height)	绘制一个矩形，可以通过fill或者stroke来填充或描边
bezierCurveTo()	贝塞尔曲线

绘制路径

属性名	作用	默认值
fill()	填充路径
stroke()	描边路径
clip()	将当前创建的路径设置为当前剪切路径的方法

填充和描边

属性名	作用	默认值
fillStyle
strokeStyle

渐变

返回的CanvasGradient对象的addColorStop(offset, color)添加渐变颜色

属性名	作用	默认值
createLinearGradient(x0, y0, x1, y1)	创建一个沿参数坐标指定的直线的渐变。该方法返回一个线性对象	返回值可以作为描边或者填充的值使用
createRadialGradient(x0, y0, r0, x1, y1, r1)	确定两个圆的坐标，放射性渐变

图案
返回CanvasPattern对象，可以把此模式赋值给当前的fillStyle等，在 canvas 上绘制出效果

属性名	作用	默认值
createPattern(image, repetition)	用指定的图片创建图案	image可以是图片，视频，canvas的Element，或者canvas上下文，ImageData,Blob, ImageBitmap; repetition是重复方式，跟css里的背景图片重复参数一样

绘制文本

文本样式

阴影

变换

合成

属性名	作用	默认值
globalAlpha	合成到canvas之前，设置图形和图像的透明度
globalCompositeOperation	设置如何在已经存在的位图上绘制图形和图像	详细用法