Canvas对象
yuhuo2021-05-16JavaScriptJavaScript对象
CanvasRenderingContext2D 类
1. 创建对象
var canvas = document.getElementById("myCanvas");
// 生成绘图上下文
var ctx = ele.getContext('2d');
// 生成绘图上下文，关闭透明度
var ctx = canvas.getContext('2d', { alpha: false });
2. 原型属性
| 原型属性 | 描述 | |
|---|---|---|
| 图形 | fillStyle | 填充图形：颜色值，canvasGradient 对象，CanvasPattern 对象 |
strokeStyle | 描边图形：颜色值，canvasGradient 对象，CanvasPattern 对象 | |
| ============== | ============== | |
| 描边 | lineWidth | 描边宽度：数值（默认 1） |
lineCap | 描边末端形状 butt：无突出（默认值） round：突出圆形 square：突出方形 | |
lineJoin | 描边转角形状 miter：斜接（默认值） bevel：斜面 round：圆形 | |
miterLimit | 最大斜接长度（当描边转角是斜接时才有效，超过最大斜接长度时，会以斜面显示） | |
lineDashOffset | 描边虚线偏移：数值（默认 0） | |
| ============== | ============== | |
| 阴影 | shadowOffsetX | 阴影水平偏移距离：数值（默认 0） |
shadowOffsetY | 阴影垂直偏移距离：数值（默认 0） | |
shadowBlur | 阴影模糊距离：数值（默认 0） | |
shadowColor | 阴影颜色：颜色值 | |
| ============== | ============== | |
| 文本 | font | 字体样式：css-font |
textAlign | 文本水平对齐：star，end，left，right，center | |
| 其他 | globalAlpha | 全局透明度：0.0 ~ 1.1 |
textBaseline | 文本基线对齐：top，hanging，middle，alphabetic，ideographic，bottom | |
direction | 文本方向：ltr，rtl，inherit | |
| ============== | ============== | |
imageSmoothingEnabled | 缩放图像时是否使用平滑算法：true（默认值），false | |
| globalCompositeOperation | 合成类型：source-over（默认值），source-in，source-out，source-atop destination-over，destination-in，destination-out，destination-atop lighter，copy，xor，multiply，screen，overlay，darken，lighten，color-dodge，color-burn，hard-light，soft-light，difference，exclusion，hue，saturation，color，luminosity |
3. 原型方法
| 原型方法 | 描述 | |
|---|---|---|
| 路径 | beginPath() | 新建一条路径 |
moveTo(x, y) | 画笔移动到目标点 | |
lineTo(x, y) | 从当前点画一段直线到目标点 | |
arc(x, y, radius, startAngle, endAngle, anticlockwise) | 从当前点画一段直线到圆弧起始点，再画一段圆弧 startAngle：起始弧度（0 表示 3 点钟角度，Math.PI 表示 9 点钟角度） endAngle：结束弧度 anticlockwise：false 顺时针方向（默认），true 逆时针方向 | |
rect(x, y, width, height) | 画笔移动到目标点，画一个矩形 | |
quadraticCurveTo(x1, y1, x, y) | 从当前点画二次贝塞尔曲线 | |
bezierCurveTo(x1, y1, x2, y2, x, y) | 从当前点画三次贝塞尔曲线 | |
closePath() | 闭合路径，即从当前点画一段直线到起始点 | |
| 样式 | ============== | ============== |
setLineDash(segments) | 设置描边虚线数组 segments：数值数组，如 [5, 10] | |
getLineDash() | 获取描边虚线数组 | |
createLinearGradient(x1, y1, x2, y2) | 创建线性渐变 CanvasGradient 对象 x1, y1：渐变起点坐标 x2, y2：渐变终点坐标 | |
createRadialGradient(x1, y1, r1, x2, y2, r2) | 创建径性渐变 CanvasGradient 对象 x1, y1, r1：渐变起点圆的圆心坐标和半径 x1, y1, r1：渐变终点圆的圆心坐标和半径 | |
createPattern(image, type) | 创建图案 CanvasPattern 对象 image：HTMLImageElement 对象，HTMLCanvasElement 对象type：repeat，repeat-x，repeat-y，no-repeat | |
| ============== | ============== | |
| 变换 | translate(x, y) | 坐标轴平移 |
rotate(angle) | 顺时针围绕 canvas 原点旋转，单位弧度 | |
scale(x, y) | 坐标轴缩放 | |
transform(a, b, c, d, e, f) | 进行矩阵变换 | |
resetTransform() | 重置为单位矩阵，即取消变换 | |
setTransform(a, b, c, d, e, f) | 重置为单位矩阵，再进行矩阵变换 | |
| ============== | ============== | |
| 绘画 | fillRect(x, y, width, height) | 填充指定矩形 |
strokeRect(x, y, width, height) | 描边指定矩形 | |
clearRect(x, y, width, height) | 清除指定矩形区域 | |
fill([fillRule], [path2D]) | 填充当前路径 fillRule：填充规则 nonzero（默认值），evenodd path2D：Path2D 对象 | |
stroke([path2D]) | 描边当前路径 | |
fillText(text, x, y [, maxWidth]) | 填充文本 | |
strokeText(text, x, y [, maxWidth]) | 描边文本 | |
| drawImage(image, x, y[, width, height]) drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) | 绘制图像 image：HTMLImageElement 对象，HTMLCanvasElement 对象，HTMLVideoElement 对象 x, y, dx, dy：绘制坐标 width, height, dWidth, dHeight：缩放宽高 sWidth, sHeight：切片宽高 sx, sy：切片坐标 | |
clip() | 将当前路径转为裁剪区域（多次执行该方法时，裁剪区域为多次裁剪区域的交集，要想恢复之前的裁剪区域只能使用 save / restore ） | |
| ============== | ============== | |
| 状态 | save() | 将当前画布状态保存到栈中（画布状态包括画布属性，变换，裁剪路径） |
restore() | 从栈中取出之前保存的画布状态并恢复 | |
| ============== | ============== | |
| 图片 | createImageData(width, height) | 创建一个新的 ImageData 对象，每个像素预设为透明黑 |
createImageData(anotherImageData) | 创建相同宽高的 ImageData 对象，每个像素预设为透明黑 | |
getImageData(left, top, width, height) | 获取画布指定区域的 ImageData 对像 | |
putImageData(imageData, dx, dy) | 画布指定区域写入 ImageData 对像 | |
| ============== | ============== | |
| 流 | captureStream() | 获取画布的媒体流 MediaStream 对象 |
Path2D 类
1. 创建对象
// 创建一条空路径
var path = new Path2D();
// 创建一条svg路径
var path = new Path2D("M10 10 h 80 v 80 h -80 Z");
2. 原型方法
| 原型方法 | 描述 |
|---|---|
moveTo(x, y) | 画笔移动到目标点 |
lineTo(x, y) | 从当前点画一段直线到目标点 |
arc(x, y, radius, startAngle, endAngle, anticlockwise) | 从当前点画一段直线到圆弧起始点，再画一段圆弧 startAngle：起始弧度（0 表示 3 点钟角度，Math.PI 表示 9 点钟角度） endAngle：结束弧度 anticlockwise：false 顺时针方向（默认），true 逆时针方向 |
rect(x, y, width, height) | 画笔移动到目标点，画一个矩形 |
quadraticCurveTo(x1, y1, x, y) | 从当前点画二次贝塞尔曲线 |
bezierCurveTo(x1, y1, x2, y2, x, y) | 从当前点画三次贝塞尔曲线 |
closePath() | 闭合路径，即从当前点画一段直线到起始点 |
CanvasGradient 类
1. 创建对象
// 线性渐变
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
// 径向渐变
var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
2. 原型方法
| 原型方法 | 描述 |
|---|---|
addColorStop(position, color) | 添加渐变节点 position：节点位置，0~1 color：节点颜色，颜色值 |
CanvasPattern 类
1. 创建对象
// 创建图案
var pattern = ctx.createPattern(image, "repeat");
ImageData 类
1. 创建对象
// 创建一个新的 ImageData 对象
var imageData1 = ctx.createImageData(50, 50);
// 创建相同宽高的 ImageData 对象
var imageData2 = ctx.createImageData(imageData1);
// 获取画布指定区域的 ImageData 对像
var imageData3 = ctx.getImageData(0, 0, 50, 50)
2. 原型属性
| 原型属性 | 描述 |
|---|---|
width | 图片宽度 |
height | 图片高度 |
data | 返回 Uint8ClampedArray 对象（每个像素用数组的4个元素存储，按照红，绿，蓝，透明度的顺序，元素取值 0~255） |