canvas 简单示例

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

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

简单示例

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

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

html 复制代码
<canvas id="canvas"></canvas>

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

javascript 复制代码
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

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

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

CanvasRenderingContext2D

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

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

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

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

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

  • strokeRect(x, y, width, height):绘制一个矩形边框,其中 xy 表示矩形的左上角坐标,widthheight 表示矩形的宽度和高度。
JavaScript 复制代码
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.strokeRect(20, 10, 200, 100);

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

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

总结

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

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

相关推荐
蓝倾7 分钟前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong11 分钟前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹13 分钟前
硬件产品研发管理工具实战指南
前端·python
用户38022585982413 分钟前
vue3源码解析:依赖收集
前端·vue.js
用户75794199497013 分钟前
基于JavaScript的简易Git
javascript
WaiterL14 分钟前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason16 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕77817 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽36 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟36 分钟前
让对象保持定义的顺序来排列
前端