canvas系列 — canvas常用API介绍

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对象参数	其余两个参数含义同上

注意

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

3. CanvasRenderingContext2D

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

🌰