Canvas API大全 -岩石教程

获取 Canvas 元素和上下文

<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
</script>

绘制路径

方法	参数	描述	示例
`beginPath()`	无	开始一个新路径	`ctx.beginPath();`
`closePath()`	无	闭合当前路径	`ctx.closePath();`
`moveTo(x, y)`	`x`: 起点 x 坐标 `y`: 起点 y 坐标	移动画笔到指定的坐标	`ctx.moveTo(50, 50);`
`lineTo(x, y)`	`x`: 终点 x 坐标 `y`: 终点 y 坐标	画一条从当前位置到指定坐标的直线	`ctx.lineTo(200, 200);`
`arc(x, y, radius, startAngle, endAngle, anticlockwise)`	`x`: 圆心 x 坐标 `y`: 圆心 y 坐标 `radius`: 半径 `startAngle`: 起始角度 `endAngle`: 结束角度 `anticlockwise`: 逆时针（可选）	画一个圆弧	`ctx.arc(100, 100, 50, 0, Math.PI * 2);`
`arcTo(x1, y1, x2, y2, radius)`	`x1`: 第一个控制点 x 坐标 `y1`: 第一个控制点 y 坐标 `x2`: 第二个控制点 x 坐标 `y2`: 第二个控制点 y 坐标 `radius`: 圆弧半径	画一条圆弧线	`ctx.arcTo(150, 150, 200, 50, 30);`
`bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`	`cp1x`: 第一个控制点 x 坐标 `cp1y`: 第一个控制点 y 坐标 `cp2x`: 第二个控制点 x 坐标 `cp2y`: 第二个控制点 y 坐标 `x`: 结束点 x 坐标 `y`: 结束点 y 坐标	画一条贝塞尔曲线	`ctx.bezierCurveTo(100, 100, 200, 200, 300, 100);`
`quadraticCurveTo(cpx, cpy, x, y)`	`cpx`: 控制点 x 坐标 `cpy`: 控制点 y 坐标 `x`: 结束点 x 坐标 `y`: 结束点 y 坐标	画一条二次贝塞尔曲线	`ctx.quadraticCurveTo(150, 150, 200, 50);`
`rect(x, y, width, height)`	`x`: 起点 x 坐标 `y`: 起点 y 坐标 `width`: 宽度 `height`: 高度	画一个矩形路径	`ctx.rect(50, 50, 200, 100);`
`fill()`	无	填充当前路径	`ctx.fill();`
`stroke()`	无	描边当前路径	`ctx.stroke();`
`clip()`	无	从当前路径创建剪切区域	`ctx.clip();`

填充与描边样式

属性/方法	参数	描述	示例
`fillStyle`	颜色、渐变或模式	设置或返回用于填充绘画的颜色、渐变或模式	`ctx.fillStyle = '#FF0000';`
`strokeStyle`	颜色、渐变或模式	设置或返回用于描边的颜色、渐变或模式	`ctx.strokeStyle = '#00FF00';`
`createLinearGradient(x0, y0, x1, y1)`	`x0`: 起点 x 坐标 `y0`: 起点 y 坐标 `x1`: 终点 x 坐标 `y1`: 终点 y 坐标	创建一个线性渐变对象	`const grad = ctx.createLinearGradient(0, 0, 200, 0);`
`createRadialGradient(x0, y0, r0, x1, y1, r1)`	`x0`: 起点 x 坐标 `y0`: 起点 y 坐标 `r0`: 起点半径 `x1`: 终点 x 坐标 `y1`: 终点 y 坐标 `r1`: 终点半径	创建一个放射性渐变对象	`const grad = ctx.createRadialGradient(100, 100, 50, 100, 100, 100);`
`createPattern(image, repetition)`	`image`: 图像对象 `repetition`: 重复方式 (`repeat`, `repeat-x`, `repeat-y`, `no-repeat`)	创建一个用于指定图像的模式	`const pattern = ctx.createPattern(img, 'repeat');`
`addColorStop(offset, color)`	`offset`: 偏移量（0 到 1 之间） `color`: 颜色	为渐变对象添加一个颜色停止点	`grad.addColorStop(0, 'red');`

线条样式

属性	参数	描述	示例
`lineWidth`	数值	设置或返回当前绘图的线条宽度	`ctx.lineWidth = 5;`
`lineCap`	`butt`, `round`, `square`	设置或返回线条末端的样式	`ctx.lineCap = 'round';`
`lineJoin`	`round`, `bevel`, `miter`	设置或返回两条线相交时，所创建的拐角类型	`ctx.lineJoin = 'miter';`
`miterLimit`	数值	设置或返回最大斜接长度	`ctx.miterLimit = 10;`
`setLineDash(segments)`	`segments`: 数组	设置当前虚线样式	`ctx.setLineDash([5, 15]);`
`lineDashOffset`	数值	设置或返回当前虚线样式的起始点偏移	`ctx.lineDashOffset = 2.5;`
`getLineDash()`	无	返回当前虚线样式的长度数组	`const dash = ctx.getLineDash();`

文本

属性/方法	参数	描述	示例
`font`	字符串	设置或返回文本内容的当前字体属性	`ctx.font = '30px Arial';`
`textAlign`	`start`, `end`, `left`, `right`, `center`	设置或返回文本内容的当前对齐方式	`ctx.textAlign = 'center';`
`textBaseline`	`top`, `hanging`, `middle`, `alphabetic`, `ideographic`, `bottom`	设置或返回在绘制文本时的当前文本基线	`ctx.textBaseline = 'middle';`
`fillText(text, x, y, maxWidth)`	`text`: 文本 `x`: 起点 x 坐标 `y`: 起点 y 坐标 `maxWidth`: 最大宽度（可选）	在画布上绘制填充文本	`ctx.fillText('Hello World', 100, 50);`
`strokeText(text, x, y, maxWidth)`	`text`: 文本 `x`: 起点 x 坐标 `y`: 起点 y 坐标 `maxWidth`: 最大宽度（可选）	在画布上绘制描边文本	`ctx.strokeText('Hello World', 100, 50);`
`measureText(text)`	`text`: 文本	返回包含指定文本宽度的对象	`const textMetrics = ctx.measureText('Hello World');`

图像

| 方法 | 参数 | 描述 | 示例 | |

-----------------------------|----------------------------|-------------------------------------------|------| | drawImage(image, dx, dy) | image: 图像对象
dx: x 坐标
dy: y 坐标 | 在画布上绘制图像 | ctx.drawImage(img, 10, 10); | | drawImage(image, dx, dy, dWidth, dHeight) | image: 图像对象
dx: x 坐标
dy: y 坐标
dWidth: 宽度
dHeight: 高度 | 在画布上绘制图像（缩放） | ctx.drawImage(img, 10, 10, 100, 100); | | drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) | image: 图像对象
sx: 图像源的 x 坐标
sy: 图像源的 y 坐标
sWidth: 源宽度
sHeight: 源高度
dx: x 坐标
dy: y 坐标
dWidth: 目标宽度
dHeight: 目标高度 | 从图像源的部分区域绘制图像 | ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); |

变形

方法	参数	描述	示例
`scale(x, y)`	`x`: 水平缩放 `y`: 垂直缩放	缩放当前绘图	`ctx.scale(2, 2);`
`rotate(angle)`	`angle`: 旋转角度（弧度制）	旋转当前绘图	`ctx.rotate(Math.PI / 4);`
`translate(x, y)`	`x`: 水平位移 `y`: 垂直位移	平移当前绘图	`ctx.translate(100, 100);`
`transform(a, b, c, d, e, f)`	`a`, `b`, `c`, `d`, `e`, `f`	直接设置当前变换矩阵	`ctx.transform(1, 0.5, -0.5, 1, 30, 10);`
`setTransform(a, b, c, d, e, f)`	`a`, `b`, `c`, `d`, `e`, `f`	重置变换矩阵	`ctx.setTransform(1, 0, 0, 1, 0, 0);`
`resetTransform()`	无	重置变换矩阵	`ctx.resetTransform();`

阴影

属性	参数	描述	示例
`shadowColor`	颜色	设置或返回用于阴影的颜色	`ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';`
`shadowBlur`	数值	设置或返回用于阴影的模糊级别	`ctx.shadowBlur = 10;`
`shadowOffsetX`	数值	设置或返回阴影的水平偏移	`ctx.shadowOffsetX = 5;`
`shadowOffsetY`	数值	设置或返回阴影的垂直偏移	`ctx.shadowOffsetY = 5;`

状态

方法	参数	描述	示例
`save()`	无	保存当前绘图状态	`ctx.save();`
`restore()`	无	恢复之前保存的绘图状态	`ctx.restore();`

像素操作

方法	参数	描述	示例
`createImageData(width, height)`	`width`: 宽度 `height`: 高度	创建一个新的空白 `ImageData` 对象	`const imageData = ctx.createImageData(100, 100);`
`getImageData(sx, sy, sw, sh)`	`sx`: 起点 x 坐标 `sy`: 起点 y 坐标 `sw`: 宽度 `sh`: 高度	返回指定矩形的 `ImageData` 对象	`const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);`
`putImageData(imageData, dx, dy)`	`imageData`: `ImageData` 对象 `dx`: x 坐标 `dy`: y 坐标	将 `ImageData` 对象放回画布上	`ctx.putImageData(imageData, 10, 10);`

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas API Example</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600" style="border:1px solid #000;"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 绘制矩形
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(10, 10, 100, 50);

        // 绘制路径
        ctx.beginPath();
        ctx.moveTo(150, 50);
        ctx.lineTo(200, 200);
        ctx.lineTo(100, 200);
        ctx.closePath();
        ctx.stroke();

        // 绘制圆弧
        ctx.beginPath();
        ctx.arc(300, 75, 50, 0, Math.PI * 2, true);
        ctx.fillStyle = 'green';
        ctx.fill();

        // 绘制文本
        ctx.font = '30px Arial';
        ctx.fillText('Hello Canvas', 400, 50);

        // 绘制图像
        const img = new Image();
        img.onload = function() {
            ctx.drawImage(img, 10, 70, 100, 100);
        };
        img.src = 'https://via.placeholder.com/100';

        // 变形操作
        ctx.translate(200, 200);
        ctx.rotate(Math.PI / 4);
        ctx.fillStyle = 'blue';
        ctx.fillRect(-50, -50, 100, 100);

        // 使用渐变
        const gradient = ctx.createLinearGradient(0, 0, 200, 0);
        gradient.addColorStop(0, 'red');
        gradient.addColorStop(1, 'blue');
        ctx.fillStyle = gradient;
        ctx.fillRect(250, 50, 150, 100);

        // 使用阴影
        ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.fillStyle = 'green';
        ctx.fillRect(250, 200, 150, 100);
    </script>
</body>
</html>

上述代码示例展示了如何使用 HTML5 Canvas API 绘制各种形状、图像和文本，并应用样式和变形操作。这是对 Canvas API 的一个全面概述，但在实际使用中，还可能需要根据具体需求进行调整和扩展。