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渲染上下文。 它用于绘制形状,文本,图像和其他对象。
🌰