Canvas入门教程！！超全绘制直线，圆形，矩形等方法属性【Canvas篇一】

原创

已于 2025-04-23 21:01:23 修改 · 1.9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-04-21 21:32:43 首次发布

如果没有天赋，那就一直重复。

canvas是什么？

<canvas> 是 HTML5 中引入的一个元素，用于通过 JavaScript 绘制图形。它提供了一种在网页上动态生成图像、动画和图形的方法。<canvas> 本身只是一个容器，所有的绘图操作都需要通过 JavaScript 来实现。

使用场景：

动态图形和动画：用于创建游戏、动画和其他动态效果。
数据可视化：绘制图表、图形和其他数据可视化内容。
图像处理：可以对图像进行像素级的操作。
图形编辑器：开发在线绘图工具和图像编辑器。

canvas使用：

引入：

<canvas id="canvas"> 当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>

内部的内容是不支持canvas的浏览器会显示的内容…（我就不说是啥浏览器了hhh）

获取2D的上下文：

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext("2d");

或者根据以下代码进行判断浏览器的支持性：（对不支持的进行处理）

if (canvas.getContext) {
   
   
    // 正常逻辑
} else {
   
   
    // 不支持的兼容处理
}

坐标轴：

一般画布根据坐标轴进行判断我们在哪落笔。左上角为原点，向左向右延伸形成x，y轴。
在这里插入图片描述
上图在网上截取侵权联系删除。

绘制：

beginPath() ：

Canvas 2D API 的 CanvasRenderingContext2D.beginPath() 方法用于通过清空子路径列表开始一个新路径。当你想创建一个新的路径时，调用此方法。
beginPath() 方法在开始每条线之前调用，就是开始画的时候调用。

moveTo() :

Canvas 2D API 的 CanvasRenderingContext2D.moveTo() 方法用于在给定的 (x，y) 坐标处开始一个新的子路径。

moveTo(x, y)

从这个点开始画的意思。

lineTo():

Canvas 2D API 的 CanvasRenderingContext2D 接口的 lineTo() 方法将当前子路径的最后一个点与指定的 (x, y) 坐标用直线段相连，从而将一个直线段添加到当前子路径中。

lineTo(x, y)

在这个坐标结束绘画的意思。

stroke()：

Canvas 2D API 的 CanvasRenderingContext2D.stroke() 方法用于根据当前的描边样式，绘制当前或指定的路径。

stroke()
stroke(path)

让画的东西在画布上有个印子，让我们看到这个东西。

fillRect() ：

Canvas 2D API 的 CanvasRenderingContext2D.fillRect() 方法用于绘制一个矩形，并根据当前的 fillStyle 进行填充。
这个方法是直接在画布上绘制填充，并不修改当前路径，所以在这个方法后面调用 fill() 或者 stroke() 方法并不会对这个方法有什么影响。

fillRect(x, y, width, height)

strokeStyle 属性：

Canvas 2D API 的 CanvasRenderingContext2D.strokeStyle 属性指定用于形状描边（轮廓）的颜色、渐变或图案。默认值是 #000（黑色）。
设置绘制的颜色为蓝色：

ctx.strokeStyle = "blue";

fillStyle 属性：

Canvas 2D API 的 CanvasRenderingContext2D.fillStyle 属性指定用于形状内部的颜色、渐变或图案。默认样式为 #000（黑色）。

设置内部为蓝色：

ctx.fillStyle = "blue";

画一条线：

示例：

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

        // 绘制一条线
        context.beginPath();
        context.moveTo(0, 0); // 起点
        context.lineTo(200, 200); // 终点
        context.strokeStyle = 'green';
        context.stroke();
    </script>
</body>
</html>

在这里插入图片描述

画一个简单的矩形：

示例：

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

        // 绘制一个填充的矩形
        context.fillStyle = 'red';
        context.fillRect(50, 50, 100, 100);
    </script>
</body>
</html>

带fill()就是让他变成实心的。。。
在这里插入图片描述

绘制一个圆形：

这里使用的是弧度值。弧度值转角度值： π / 180度 * 角度
示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Circle</title>
</head>

<body>
    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>
    <script>
        let canvas = document.getElementById('myCanvas');
        let context = canvas.getContext('2d');

        // 绘制一个圆形
        context.beginPath();
        context.arc(100, 100, 50, 0, 2 * Math.PI); // 圆心(100, 100)，半径50
        context.fillStyle = 'blue';
        context.fill();
    </script>
</body>

</html>

在这里插入图片描述

文本：

text 是文字内容。x，y是文字的起点。maxWidth设置文本的最大宽度，如果超过这个宽度文字会被压缩。

ctx.fillText(text,x,y[,maxWidth])
ctx.strokeText(text,x,y[,maxWidth])

fillText() 方法:

Canvas 2D API 的 CanvasRenderingContext2D 对象的方法 fillText() 用于在指定的坐标上绘制文本字符串，并使用当前的 fillStyle 对其进行填充。存在一个可选参数，其指定了渲染文本的最大宽度，用户代理将通过压缩文本或使用较小的字体大小来实现。

fillText(text, x, y)
fillText(text, x, y, maxWidth)

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字</title>
</head>

<body>
    <canvas id="myCanvas" width="200" height="200" style="background-color: red;">