canvas 简单示例

站长

2023年09月19日 05:53 · 阅读数 20

Canvas 是 HTML5 中的一个重要的 API，它提供了一个画布元素，允许开发者在网页中绘制图形和动画。在 JavaScript 中，可以使用 Canvas 来创建各种各样的图形和动画，如游戏、交互式工具、数据可视化等。

今天我们就来初步认识一下 Canvas 及它的最基本用法。

简单示例

假设需求是：使用Canvas 绘制一个 200px * 100px 的背景为绿色的长方形。

首先，我们需要创建一个 canvas 元素，以便调用 Canvas 相关的接口函数：

<canvas id="canvas"></canvas>

接下来，我们就通过 canvas 元素的相关 API 来实现绘制长方形的目的：

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

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 200, 100);

通过上面这个简单的例子，我们可以看到，整个图形绘制的主流程其实都是通过 ctx 的相关属性和接口来完成的，我们可以来了解一下 ctx。

CanvasRenderingContext2D 接口是 Canvas API 的一部分，可为 canvas 元素的绘图表面提供 2D 渲染上下文。

在上面的示例中，我们用到的关于 CanvasRenderingContext2D 的方法有：

fillRect(x, y, width, height)：绘制一个填充矩形，其中 x 和 y 表示矩形的左上角坐标，width 和 height 表示矩形的宽度和高度。

这个方法是绘制一个实心的矩形，那假设我们要绘制一个空心的矩形，该怎么实现呢？

这里就要用到 CanvasRenderingContext2D 的另一个方法函数：

strokeRect(x, y, width, height)：绘制一个矩形边框，其中 x 和 y 表示矩形的左上角坐标，width 和 height 表示矩形的宽度和高度。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(20, 10, 200, 100);

这样就能绘制出一个边框为绿色的空心矩形了。

CanvasRenderingContext2D 还有很多其他的方法，这些方法一起构成了 canvas 强大的基石。

Canvas 的功能非常强大，并且它的使用场景比较多，还是很有必要学习一下的。

CanvasRenderingContext2D 是 Canvas 的重要组成部分，我们的很多操作其实都是基于画布上下文的。