前端面试canvas有”元素相关API“、”绘制图形和路径相关API“、”绘制文本相关API“和”图像相关API“：1、素相关API、getContext('2d')，获取2D绘图上下文；2、绘制图形和路径相关API，fillStyle：设置填充颜色或样式；3、绘制文本相关API，font，设置绘制文本的字体样式；4、图像相关API，drawImage()绘制图像。
本教程操作系统：Windows10系统、Dell G3电脑。
在前端面试中，关于Canvas的一些常用API包括：
-
Canvas元素相关API：
- getContext('2d')：获取2D绘图上下文。
- toDataURL()：将Canvas内容导出为data URL。
- toBlob()：将Canvas内容导出为Blob对象。
-
绘制图形和路径相关API：
- fillStyle：设置填充颜色或样式。
- strokeStyle：设置描边颜色或样式。
- lineTo()：在路径中添加一个新点，创建一条直线。
- moveTo()：将路径的起点移动到一个新点。
- arc()：绘制圆弧或扇形。
- rect()：绘制矩形。
- fillRect()：绘制填充的矩形。
- strokeRect()：绘制描边的矩形。
-
绘制文本相关API：
- font：设置绘制文本的字体样式。
- fillText()：在Canvas上绘制填充的文本。
- strokeText()：在Canvas上绘制描边的文本。
- measureText()：测量给定文本的长度。
-
图像相关API：
- drawImage()：在Canvas上绘制图像。
- createPattern()：创建用于填充图形的图案。
以下是一个示例，演示如何使用Canvas API绘制一个简单的图形：
<!DOCTYPE html>
<html>
<head>
<title>Canvas API示例</title>
<style>
/* 这里可以定义样式 */
</style>
<script>
window.onload = function() {
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 设置绘制属性
ctx.fillStyle = 'red'; // 设置填充颜色为红色
ctx.strokeStyle = 'blue'; // 设置描边颜色为蓝色
// 绘制矩形
ctx.fillRect(50, 50, 200, 100); // 绘制填充矩形
ctx.strokeRect(50, 50, 200, 100); // 绘制描边矩形
// 绘制圆形
ctx.beginPath();
ctx.arc(300, 200, 50, 0, Math.PI * 2); // 绘制一个圆形路径
ctx.closePath();
ctx.fill(); // 填充圆形
ctx.stroke(); // 描边圆形
// 绘制文本
ctx.font = '24px Arial'; // 设置字体样式和大小
ctx.fillText('Hello, Canvas!', 100, 300); // 填充文本
ctx.strokeText('Hello, Canvas!', 200, 350); // 描边文本
}
</script>
</head>
<body>
<h1>Canvas API示例</h1>
<canvas id="myCanvas" width="500" height="400"></canvas>
<!-- 其他HTML内容... -->
</body>
</html>