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 的重要组成部分,我们的很多操作其实都是基于画布上下文的。

相关推荐
Pedantic4 分钟前
为什么 Swift 字符串不能用 `myString[3]` 随便取字符?
前端·后端
RichardLai886 分钟前
Kotlin Flow:构建响应式流的现代 Kotlin 之道
android·前端·kotlin
Apifox8 分钟前
提交代码后如何自动触发 Apifox 的自动化测试?
前端·后端·测试
qiyue7710 分钟前
AI编程专栏(四) - 提示词技术,如何写编程提示词
前端·ai编程
DoraBigHead13 分钟前
【JS三兄弟谁是谁】搞懂 splice、slice、split,只需一杯奶茶的时间!
前端·javascript·面试
国家不保护废物14 分钟前
前端存储与后端服务的奇妙冒险:一个Node.js服务器的诞生记(cookie实现用户登入)
前端·javascript·后端
前端付豪14 分钟前
2、前端架构三要素:模块化、工程化、平台化
前端·javascript·架构
遂心_15 分钟前
深入剖析React待办事项应用:Hooks、组件化与性能优化实战
前端·react.js·前端框架
bo5210015 分钟前
浏览器事件机制详解以及发展史
前端·面试·浏览器
lichenyang45316 分钟前
useState的执行流程和useEffect
前端