前端面试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>
在上述示例中，我们创建了一个canvas元素，并获取了2d绘图上下文。然后，我们使用canvas api设置绘制属性，如填充颜色和描边颜色，并使用相关方法绘制矩形、圆形和文本。你可以尝试修改参数值、使用其他api和属性来绘制不同的图形和效果。
以上就是前端面试canvas有哪些api的详细内容。