js canvas画图

js canvas画图

Canvas 是 HTML5 提供的一个用于绘制图形的标签，通过 JavaScript 可以在 Canvas 上绘制各种图形、动画等效果。本文将详细介绍如何使用 JavaScript 在 Canvas 上绘制图形，并给出一些示例代码和运行结果。

1. 创建 Canvas 元素

首先，在 HTML 文件中创建一个 Canvas 元素，如下所示：

<canvas id="myCanvas" width="500" height="500"></canvas>

通过设置 id、width 和 height 属性，我们定义了一个 id 为 myCanvas 的 Canvas 元素，并指定了它的宽度和高度为 500px。

2. 获取 Canvas 上下文

在 JavaScript 中，我们需要通过获取 Canvas 上下文 (context) 才能进行绘图操作。Canvas 提供了两种绘图上下文，分别是 2D 和 WebGL。本文将主要讲解 2D 绘图。

获取 Canvas 2D 上下文的代码如下：

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

首先通过 getElementById 方法获取到刚才创建的 Canvas 元素，然后使用 getContext 方法指定获取 2D 上下文。现在我们可以使用 context 对象进行绘图操作了。

3. 绘制线条

绘制线条是 Canvas 上最基本的绘图操作之一。

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

context.beginPath();
context.moveTo(50, 50);
context.lineTo(200, 200);
context.lineWidth = 5;
context.strokeStyle = 'red';
context.stroke();

• beginPath 方法用于开始一个新的路径。
• moveTo 方法用于将画笔移动到指定的坐标点。
• lineTo 方法用于从画笔当前位置绘制一条直线到指定的坐标点。
• lineWidth 属性用于设置线条宽度。
• strokeStyle 属性用于设置线条颜色。
• stroke 方法用于绘制线条。

运行上述代码后，Canvas 将在 (50, 50) 和 (200, 200) 两个坐标点之间绘制一条红色、宽度为 5px 的线条。

4. 绘制矩形

Canvas 提供了多种绘制矩形的方法，包括绘制填充矩形和绘制边框矩形。

绘制填充矩形的示例代码如下：

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

context.fillStyle = 'blue';
context.fillRect(50, 50, 200, 100);

• fill 方法用于填充矩形。
• fillStyle 属性用于设置填充颜色。

运行上述代码后，Canvas 将在 (50, 50) 起始点处绘制一个宽度为 200px，高度为 100px 的蓝色填充矩形。

绘制边框矩形的示例代码如下：

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

context.strokeStyle = 'red';
context.lineWidth = 3;
context.strokeRect(50, 50, 200, 100);

• stroke 方法用于绘制矩形的边框。
• strokeStyle 属性用于设置边框颜色。

运行上述代码后，Canvas 将在 (50, 50) 起始点处绘制一个宽度为 200px，高度为 100px 的红色边框矩形。

5. 绘制圆形

绘制圆形需要使用 arc 方法。

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

context.beginPath();
context.arc(100, 100, 50, 0, Math.PI * 2, false);
context.fillStyle = 'green';
context.fill();

• arc 方法用于绘制弧线或圆形。
• arc 方法的参数分别是圆心的 X 坐标、圆心的 Y 坐标、半径、起始角度、结束角度、是否按逆时针绘制。
• fill 方法用于填充圆形。
• fillStyle 属性用于设置填充颜色。

运行上述代码后，Canvas 将在 (100, 100) 为圆心，半径为 50px 的位置绘制一个绿色填充的圆形。

6. 绘制文本

Canvas 也可以用于绘制文本。

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

context.font = '30px Arial';
context.fillStyle = 'black';
context.fillText('Hello, Canvas!', 50, 50);

• font 属性用于设置字体样式。
• fillText 方法用于绘制文本。
• fillStyle 属性用于设置文本颜色。

运行上述代码后，Canvas 将在 (50, 50) 位置绘制一段黑色字体为 Arial、大小为 30px 的文本。

7. 清除画布

如果需要清除 Canvas 上的内容，可以使用 clearRect 方法。

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

• clearRect 方法用于清除画布指定区域的内容。
• clearRect 方法的参数分别是清除的起始点的 X 坐标、起始点的 Y 坐标、清除的宽度、清除的高度。
• canvas.width 和 canvas.height 分别表示 Canvas 的宽度和高度。

运行上述代码后，Canvas 将清除所有绘制的内容。

结论

本文介绍了使用 JavaScript 在 Canvas 上绘制图形的基本方法，包括绘制线条、矩形、圆形和文本，以及清除画布的方法。通过学习这些基础知识，我们可以利用 Canvas 在网页上实现各种绚丽的图形效果和动画。