【图形】canvas 攻略

canvas攻略

一、什么是canvas

Canvas 是 HTML5 中的一个重要特性，它是一个用于在网页上绘制图形的 HTML 元素。Canvas 允许开发者通过 JavaScript 脚本来动态绘制图形，包括 2D 和 WebGL（3D）两种模式。

二、canvas和webgl的区别

渲染方式：
- Canvas：Canvas 使用的是 2D 渲染方式，可以绘制简单的图形、文本和图像，以及进行基本的图形变换和合成。
- WebGL：WebGL 使用的是 3D 渲染方式，基于 OpenGL ES 标准，可以实现更高级的 3D 图形渲染，包括光照、阴影、纹理映射等功能。
编程接口：
- Canvas：Canvas 使用的是简单的 2D 绘图 API，主要包括绘制路径、图形、文本、图像等基本操作。
- WebGL：WebGL 使用的是底层的 OpenGL ES 标准，需要编写复杂的着色器程序（顶点着色器和片元着色器）来控制图形渲染过程。
性能和功能：
- Canvas：Canvas 在处理简单的图形和图像时性能较好，但对于复杂的图形、动画和交互性较强的场景则受到限制。
- WebGL：WebGL 提供了更强大的渲染能力，可以实现复杂的 3D 图形渲染，以及高性能的图形处理和动画效果。
学习曲线：
- Canvas：Canvas 使用简单，学习曲线较低，适合初学者和实现简单的图形和动画。
- WebGL：WebGL 使用复杂，需要对图形学和计算机图形渲染有一定的了解，学习曲线较陡，适合有一定经验的开发者或专业的图形开发人员。

三、2D图形绘制

Canvas 元素

Canvas 元素是 HTML5 中的一个标签，用于在网页上创建一个绘图区域。通过 Canvas 元素，开发者可以在其中绘制图形、文本、图像等内容。

1	`<canvas id="myCanvas" width="500" height="300"></canvas>`

绘图环境（Context）

Canvas 元素本身并不能绘制图形，需要使用 JavaScript 获取 Canvas 元素的绘图环境（Context），然后通过绘图环境来进行绘制操作。Canvas 提供了 2D 和 WebGL 两种绘图环境。

1 2	`var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 获取 2D 绘图环境`

绘制路径

beginPath(): 开始一个新路径

beginPath() 的主要作用是告诉 Canvas 你要开始绘制一个新的路径。调用 beginPath() 方法后，Canvas 会清除之前的路径信息，并将绘图游标移动到起始位置。这样做的目的是确保每次绘制的路径都是独立的，不会受到之前路径的影响。它通常是路径绘制的第一步，在开始一个新的路径之前调用。
moveTo(x, y): 将绘图游标移动到指定位置
lineTo(x, y): 绘制一条从当前位置到指定位置的直线
arc(x, y, radius, startAngle, endAngle, anticlockwise): 绘制一段圆弧路径
closePath(): 封闭当前路径

closePath() 方法的主要作用是将当前路径的起始点和终点连接起来，形成一个封闭的路径。通常在绘制路径的最后调用 closePath() 方法，可以将路径的起始点和终点连接起来，从而形成一个封闭的图形，使得填充和描边效果更加清晰和准确。

stroke(): 绘制路径边框

ctx.beginPath();
ctx.moveTo(50, 50); // 起点
ctx.lineTo(150, 100); // 终点
ctx.lineWidth = 2; // 设置线宽
ctx.strokeStyle = 'blue'; // 设置线条颜色
ctx.stroke(); // 绘制路径的边框

stroke() 方法用于绘制路径的边框，即绘制路径的轮廓线。它会沿着路径的轮廓线绘制出一条线条，该线条的样式由当前的绘图样式（如线条颜色、线条宽度等）决定。调用 stroke() 方法后，Canvas 会根据当前路径的轮廓线样式在画布上绘制出路径的边框。

fill(): 填充路径内部

ctx.beginPath();
ctx.moveTo(100, 100); // 起点
ctx.lineTo(200, 100);
ctx.lineTo(150, 150);
ctx.closePath(); // 封闭路径，连接起点和终点
ctx.fillStyle = 'green'; // 设置填充颜色
ctx.fill(); // 填充路径的内部

fill() 方法用于填充路径的内部，即在路径所围成的区域内填充一种颜色或图案。调用 fill() 方法后，Canvas 会根据当前的填充样式（如填充颜色、渐变、图案等）填充路径所围成的区域。

绘制文本

fillText(text, x, y [, maxWidth]): 在指定位置绘制填充文本

fillText() 方法的主要作用是在 Canvas 上绘制指定文本，并以填充方式呈现。它可以在 Canvas 上的指定位置（x, y 坐标）绘制指定的文本字符串，并可以指定最大宽度（可选），当文本的宽度超过指定的最大宽度时，文本会自动换行。
strokeText(text, x, y [, maxWidth]): 在指定位置绘制文本边框

strokeText() 方法的主要作用是在 Canvas 上绘制指定文本的描边。它可以在 Canvas 上的指定位置（x, y 坐标）绘制指定的文本字符串，并以描边方式呈现。描边是指文本周围的轮廓线，而不是填充文本内容。

绘制图像

drawImage(image, x, y [, width, height]): 在指定位置绘制图像

绘制圆弧和圆

arc(x, y, radius, startAngle, endAngle [, anticlockwise]): 绘制圆弧
arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径绘制圆弧
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]): 绘制椭圆弧
circle(x, y, radius): 绘制圆

设置样式

strokeStyle: 设置绘制路径边框的颜色
1
ctx.strokeStyle = 'red';
fillStyle: 设置填充图形的颜色、渐变或图案
1
ctx.fillStyle = 'blue';
lineWidth: 设置绘制路径的线宽
1
ctx.lineWidth = 2;
font: 设置文本的字体样式和大小
1
ctx.font = 'italic 20px Arial';

textAlign: 设置文本的水平对齐方式

1	`ctx.textAlign = 'center'; // 可选值：'start', 'end', 'left', 'right', 'center'`

textBaseline: 设置文本的垂直对齐方式

1	`ctx.textBaseline = 'middle'; // 可选值：'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'`

globalAlpha: 设置绘图的透明度

1	`ctx.globalAlpha = 0.5; // 取值范围：0（完全透明）到 1（完全不透明）`

shadowColor: 设置阴影的颜色

1	`ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';`

shadowBlur: 设置阴影的模糊程度
1
ctx.shadowBlur = 10;
shadowOffsetX 和 shadowOffsetY: 设置阴影的偏移量
1
2
ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5;

其他

clearRect(x, y, width, height)：清除指定矩形区域内的像素，使其变为透明。

clearRect() 方法的主要作用是在 Canvas 上清除指定矩形区域内的像素，将这些像素设为透明。这个方法常用于清除 Canvas 上的部分内容，以便后续绘制新的图形或动画。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制一个矩形
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

// 清除矩形区域内的像素
ctx.clearRect(60, 60, 80, 80);

translate(x, y)：将 Canvas 坐标系原点移动到指定位置。

rotate(angle) ：旋转 Canvas。

rotate(angle) 方法用于旋转 Canvas 的坐标系统。它接受一个参数 angle，表示旋转的角度，单位为弧度。正值表示顺时针旋转，负值表示逆时针旋转。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 以 Canvas 原点为中心顺时针旋转 45 度
ctx.rotate(Math.PI / 4);

// 绘制旋转后的图形
// 注意：在旋转后绘制图形时，坐标系已经发生了变化，需要根据旋转后的坐标系进行绘制
ctx.fillRect(50, 50, 100, 100);

scale(x, y)：缩放 Canvas。

scale(x, y) 方法用于缩放 Canvas 的坐标系统。它接受两个参数 x 和 y，分别表示沿 x 轴和 y 轴的缩放比例。如果只传递一个参数，则表示沿 x 和 y 轴同时缩放相同比例。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 沿 x 轴和 y 轴同时放大两倍
ctx.scale(2, 2);

// 绘制放大后的图形
ctx.fillRect(50, 50, 100, 100);

clip()：将当前路径设为裁剪路径，只有在裁剪路径范围内的内容才会被绘制。

clip() 方法用于将当前路径设置为裁剪路径，只有在裁剪路径范围内的内容才会被绘制出来。这个方法可以用来实现各种有趣的图形裁剪效果，比如只显示某个区域内的内容，或者根据路径形状裁剪图像等。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制一个圆形路径
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.closePath();

// 将当前路径设置为裁剪路径
ctx.clip();

// 在裁剪路径内绘制一个矩形
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

toDataURL(type, encoderOptions)：将 Canvas 上的内容转换为 Data URL。

toDataURL() 方法的主要作用是将 Canvas 中的图像数据转换为一个 base64 编码的 URL 字符串。这个 URL 字符串可以用作 <img> 元素的 src 属性，也可以用于其他需要图像数据的地方，比如设置背景图片、生成下载链接等。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 在 Canvas 上绘制图像
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

// 将 Canvas 中的图像数据转换为 base64 编码的 URL 字符串
var imageDataURL = canvas.toDataURL();

// 创建一个新的图像元素，并设置其 src 属性为转换后的 URL 字符串
var img = new Image();
img.src = imageDataURL;

// 将图像元素添加到页面中
document.body.appendChild(img);