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

【第1章基础知识】1.2 Canvas 的绘图环境

news 来源：原创 2025/5/31 4:19:23

文章目录

前言
一、2d绘图环境
二、Canvas 状态的保存与恢复

前言

canvas 元素仅仅是为了充当绘图环境对象的容器而存在，该环境对象提供了全部的绘制功能。本书暂时只关注 2d 绘图环境，在 JavaScript 代码中，很少会用到 canvas 元素本身，除了会通过它来获取 canvas 的宽度、高度和绘图环境对象。

一、2d绘图环境

获取2d绘图环境对象，即CanvasRenderingContext2D实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>获取CanvasRenderingContext2D实例</title></head><body><canvas id="canvas"> Canvas not supported </canvas><script>const canvas = document.getElementById('canvas')// 获取canvas元素的2D渲染上下文 书上context叫绘图环境对象const context = canvas.getContext('2d')</script></body>
</html>

2d绘图环境对象的全部属性，详见MDN-CanvasRenderingContext2D，另外还可以参考HTML Canvas 参考手册。

在第2章中，我们将逐个地详述这些属性。

HTML Canvas 参考手册

二、Canvas 状态的保存与恢复

在进行绘图操作时，需要频繁设置绘图环境的属性。很多时候只是想临时性地改变这些属性。比如说，可能需要在背景中绘制细网格线，然后用粗一些的线条在网格之上进行后续的绘图。在这种情况下，需要于绘制网格线时临时性地修改 lineWidth 属性。

Canvas 的 API 提供了两个名叫 sava() 和 restore() 的方法，用于保存及恢复当前 canvas 绘图环境的所有属性。可以像下面讲的这样使用这两个方法。

function drawGrid(strokeStyle, fillStyle) {context.save()context.fillStyle = fillStylecontext.strokeStyle = strokeStylecontext.restore()
}

示例-保存绘制状态

下面示例使用 save() 方法保存当前状态，并在稍后使用 restore() 方法恢复它，这样你就能够使用当前状态绘制矩形。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");// 保存当前状态
ctx.save();ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);// 恢复到最近一次调用 save() 时保存的状态
ctx.restore();ctx.fillRect(150, 40, 100, 100);