canvas的研究 - 技术栈

一、Canvas 上下文获取与基础

1. 获取绘图上下文

javascript

ini 复制代码

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');  // 获取2D上下文
// const ctx3d = canvas.getContext('webgl');  // 获取3D上下文(WebGL)

2. Canvas 元素属性

javascript

arduino 复制代码

canvas.width = 800;      // 设置Canvas宽度（像素）
canvas.height = 600;     // 设置Canvas高度（像素）
const width = canvas.width;   // 读取宽度
const height = canvas.height; // 读取高度

🎨 二、基本图形绘制API

1. 矩形绘制

javascript

arduino 复制代码

// 填充矩形
ctx.fillRect(x, y, width, height);

// 描边矩形
ctx.strokeRect(x, y, width, height);

// 清除矩形区域
ctx.clearRect(x, y, width, height);

2. 路径绘制

javascript

scss 复制代码

// 开始新路径
ctx.beginPath();

// 移动笔触
ctx.moveTo(x, y);

// 绘制直线
ctx.lineTo(x, y);

// 绘制圆弧
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
// anticlockwise: true逆时针，false顺时针

// 绘制圆弧（通过控制点）
ctx.arcTo(x1, y1, x2, y2, radius);

// 绘制二次贝塞尔曲线
ctx.quadraticCurveTo(cp1x, cp1y, x, y);

// 绘制三次贝塞尔曲线
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

// 绘制矩形路径
ctx.rect(x, y, width, height);

// 闭合路径
ctx.closePath();

// 填充路径
ctx.fill();

// 描边路径
ctx.stroke();

// 判断点是否在路径内
const isInPath = ctx.isPointInPath(x, y);

3. 复杂路径

arduino 复制代码

// 椭圆
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

// 圆角矩形（需要自定义函数或较新浏览器）
ctx.roundRect(x, y, width, height, [radius]);

三、样式与颜色API

1. 填充与描边样式

javascript

ini 复制代码

// 填充颜色
ctx.fillStyle = 'color';  // 颜色值、渐变或图案
ctx.fillStyle = '#FF0000';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'red';

// 描边颜色
ctx.strokeStyle = 'color';

// 透明度（全局）
ctx.globalAlpha = 0.5;

2. 渐变

javascript

ini 复制代码

// 线性渐变
const linearGrad = ctx.createLinearGradient(x1, y1, x2, y2);
linearGrad.addColorStop(0, 'red');
linearGrad.addColorStop(1, 'blue');
ctx.fillStyle = linearGrad;

// 径向渐变
const radialGrad = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGrad.addColorStop(0, 'white');
radialGrad.addColorStop(1, 'black');

3. 图案

javascript

ini 复制代码

const img = new Image();
img.src = 'pattern.png';
img.onload = function() {
    const pattern = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = pattern;
};
// repeat模式: 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'

4. 线条样式

javascript

ini 复制代码

ctx.lineWidth = 5;           // 线条宽度（像素）
ctx.lineCap = 'butt';        // 端点样式: 'butt', 'round', 'square'
ctx.lineJoin = 'miter';      // 交点样式: 'miter', 'round', 'bevel'
ctx.miterLimit = 10;         // 斜接限制
ctx.setLineDash([5, 15]);    // 设置虚线样式
ctx.getLineDash();           // 获取虚线样式
ctx.lineDashOffset = 5;      // 虚线偏移量

四、文本绘制API

1. 文本绘制

javascript

arduino 复制代码

// 填充文本
ctx.fillText(text, x, y [, maxWidth]);

// 描边文本
ctx.strokeText(text, x, y [, maxWidth]);

// 测量文本
const metrics = ctx.measureText(text);
metrics.width;      // 文本宽度
metrics.actualBoundingBoxLeft;   // 左边界距离
metrics.actualBoundingBoxRight;  // 右边界距离

2. 文本样式

javascript

perl 复制代码

ctx.font = 'italic bold 20px Arial';  // 字体样式
ctx.textAlign = 'center';     // 对齐: 'left', 'center', 'right', 'start', 'end'
ctx.textBaseline = 'middle';  // 基线: 'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'
ctx.direction = 'ltr';        // 方向: 'ltr', 'rtl', 'inherit'

五、图像操作API

1. 绘制图像

javascript

scss 复制代码

const img = new Image();
img.src = 'image.jpg';

// 基本绘制
ctx.drawImage(img, dx, dy);

// 缩放绘制
ctx.drawImage(img, dx, dy, dWidth, dHeight);

// 切片绘制
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
// sx,sy: 源图像起始坐标
// sWidth,sHeight: 源图像裁切尺寸
// dx,dy: 目标位置
// dWidth,dHeight: 目标尺寸

2. 图像数据操作

javascript

ini 复制代码

// 获取图像数据
const imageData = ctx.getImageData(sx, sy, sw, sh);
// imageData.data: Uint8ClampedArray [R,G,B,A,R,G,B,A,...]

// 放置图像数据
ctx.putImageData(imageData, dx, dy);

// 创建空白图像数据
const newImageData = ctx.createImageData(width, height);
const newImageData2 = ctx.createImageData(imageData);  // 相同尺寸

六、变形与合成API

1. 坐标变换

javascript

scss 复制代码

// 平移
ctx.translate(x, y);

// 旋转（弧度）
ctx.rotate(angle);

// 缩放
ctx.scale(x, y);

// 变换矩阵
ctx.transform(a, b, c, d, e, f);
// a: 水平缩放  b: 水平倾斜
// c: 垂直倾斜  d: 垂直缩放
// e: 水平移动  f: 垂直移动

// 设置变换矩阵
ctx.setTransform(a, b, c, d, e, f);

// 重置变换
ctx.resetTransform();

2. 状态保存与恢复

javascript

scss 复制代码

// 保存当前状态（样式、变形等）
ctx.save();

// 恢复上次保存的状态
ctx.restore();

3. 合成与裁剪

javascript

perl 复制代码

// 全局合成操作
ctx.globalCompositeOperation = 'source-over';
// 常用值: 'source-over', 'source-in', 'source-out', 
// 'destination-over', 'destination-in', 'destination-out',
// 'lighter', 'copy', 'xor', 'multiply', 'screen', 'overlay',
// 'darken', 'lighten', 'color-dodge', 'color-burn', 
// 'hard-light', 'soft-light', 'difference', 'exclusion',
// 'hue', 'saturation', 'color', 'luminosity'

// 创建裁剪区域
ctx.clip();  // 基于当前路径创建裁剪区域

// 判断点是否在裁剪区域内
const isInClip = ctx.isPointInStroke(x, y);