当前位置：首页 > java >正文

Canvas入门教程！！【前端】

java 2025/7/13 7:16:52

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>

在这里插入图片描述

绘制一个圆形：

<!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)，半径50context.fillStyle = 'blue';context.fill();</script>
</body></html>