本文介绍了HTML5的Canvas元素，用于绘制图形和动画。通过`canvas`元素和`getContext()`方法获取2D渲染上下文。重点讲解了线条、矩形、路径、填充描边、渐变、图案、文本、阴影、变换、图像绘制和像素控制等常见API的使用，并提及了在实际项目中如何应用Canvas解决视频合成等问题。
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里的背景图片重复参数一样 |
绘制文本
| 属性名 | 作用 | 默认值 |
|---|---|---|
| fillText(text, x, y,[maxWidth]) | 在指定位置填充绘制文本，最大宽度可选 | |
| strokeText(text, x, y,[maxWidth]) | 在指定位置描边绘制文本，最大宽度可选 | |
| measureText(text) | 返回TextMetrics 对象 | TextMetrics： width,… |
文本样式
| 属性名 | 作用 | 默认值 |
|---|---|---|
| font | 设置字体 格式跟css的font一样 | 关于字体的样式都是在这里一起设置的 |
| textAlign | 文本对齐方式 | start, end , left, right, center；这里的textAlign="center"比较特殊。textAlign的值为center时候文本的居中是基于你在fillText的时候所给的x的值，也就是说文本一半在x的左边，一半在x的右边 |
| textBaseline | 基线对齐方式 | top, hanging, middle, alphabetic (默认),ideographic, bottom. |
| direction | 文本方向 | ltr, rtl, inherit (默认) |
阴影
| 属性名 | 作用 | 默认值 |
|---|---|---|
| shadowColor | 阴影颜色 | |
| shadowBlur | 阴影模糊程度 | |
| shadowOffsetX | 阴影水平偏移量 | |
| shadowOffsetY | 阴影垂直方向偏移量 |
变换
| 属性名 | 作用 | 默认值 |
|---|---|---|
| rotate(deg) | 坐标系顺势转旋转指定角度 | |
| scale(x, y) | canvas每个单位添加缩放变换 | |
| translate(x, y) | 对当前坐标系平移 | |
| transform() | ||
| setTransform() | ||
| resetTransform() |
合成
| 属性名 | 作用 | 默认值 |
|---|---|---|
| globalAlpha | 合成到canvas之前，设置图形和图像的透明度 | |
| globalCompositeOperation | 设置如何在已经存在的位图上绘制图形和图像 | 详细用法 |
绘制图像
| 属性名 | 作用 | 默认值 |
|---|---|---|
| drawImage() | 绘制图像 | ctx.drawImage(image, dx, dy); 或者ctx.drawImage(image, dx, dy, dWidth, dHeight); 或者 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); |
像素控制
| 属性名 | 作用 | 默认值 |
|---|---|---|
| createImageData(width, height 或者 imagedata) | 创建一个新的、空白的、指定大小的imageData对象 | 从现有的 ImageData 对象中，复制一个和其宽度和高度相同的对象。图像自身不允许被复制。 |
| getImageData(sx, sy, sw, sh) | 用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh | |
| putImageData() | ctx.putImageData(imagedata, dx, dy);或 ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight); |
canvas状态
| 属性名 | 作用 | 默认值 |
|---|---|---|
| save() | 使用栈保存当前的绘画样式状态，你可以使用 restore() 恢复任何改变 | |
| restore() | 恢复到最近的绘制样式状态，此状态是通过 save() 保存到”状态栈“中最新的元素 | |
| canvas |
以上加粗的api是我经常看到或者使用的，其他更多的可以看MDN的介绍https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
以前做过一个合成视频的需求，学习和使用了一些canvas的知识；所以根据实际遇到的canvas的场景总结了几篇文档：
扫一扫
7841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
