搞懂 ctx.restore();ctx.save()；ctx.beginPath();

最新推荐文章于 2021-07-06 11:29:50 发布
原创 最新推荐文章于 2021-07-06 11:29:50 发布 · 1.2w 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#save()与restore()的区别 #canvas

本文详细解析了Canvas中beginPath(), ctx.save() 和 ctx.restore() 函数的功能与使用方法。beginPath()用于开始新的路径绘制；ctx.save()保存当前绘图状态；ctx.restore()则恢复之前保存的状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在做canvas时钟时，ctx.restore();ctx.save()；ctx.beginPath();反复用到！

那么，这几个函数到底是什么功能呢?有什么区别和联系呢？

1.beginPath()

w3c上的解释：beginPath() 方法在一个画布中开始子路径的一个新的集合。

也就是说，运行到这个函数时，context中止当前的路径，立刻把当前的坐标设置为起点(0,0)，开始一条新的路径。

2. ctx.restore()

W3C的解释是：

restore() 方法从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。

3.ctx.save()

W3C的解释是：

保存当前图像状态的一份拷贝。

那么可以看出：save()和restore()的区别在于：

save()把当前状态推入到绘图堆栈中，而restore()从绘图堆栈中的顶端弹出最近保存的状态，并且根据这些存储的值来设置当前绘图状态。

废话再说一遍：save()主要用来保存目前Canvas的状态。通过save()函数它会将目前Canvas的状态推到绘图堆栈中。

                         restore()是从绘图堆栈中弹出上一个Canvas的状态。

canvas绘制路径之 beginPath() 和 closePath()
大剑师兰特的GIS世界
01-10 2670
绘制路径的步骤 - 首先，需要创建路径起始点。 - 然后使用画图方法去画出路径 - 把路径封闭。 - 一旦路径生成，就可以通过描边或填充路径区域来渲染图形。 在这篇文章中，我们着重关注`beginPath()` 和 `closePath()`
微信小程序canvas ctx.setFillStyle('transparent')在安卓上导致图片无法显示
Rocky_cx的博客
02-26 4448
// 绘制封面圆角 let x = clip_left, y = clip_top, r = 6, w = clip_width, h = clip_height ctx.save()//先保存 ctx.beginPath() // 开始绘制 ctx.s...
弄懂canvas中的save和restore
laokdidiao的专栏
12-26 1万+
一直以来没有特别明白canvas中的save()和restore()函数，这次终于通过微信小程序中使用此函数的时候弄明白了，以下代码可以运行在微信小程序中~~看效果：代码：const ctx = wx.createCanvasContext('canvas') ctx.save() ctx.setFillStyle('red') ctx.scale(2, 2) ctx.fillRect(10,
ctx.beginPath()开始新路径
Charlie8915的博客
02-22 2703
beginPath() 方法开始一条路径，或重置当前的路径。 提示：请使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。 提示：请使用stroke()方法在画布上绘制确切的路径 JavaScript 语法： context.beginPath(); ...
Canvas学习：save()和restore()
wulixiaoxiao1的博客
03-18 2494
本来今天想开始学习怎么在Canvas中绘制矩形。但昨天发朋友圈，聊到Canvas。有网友提醒我将所有绘制的东西放在ctx.save()和ctx.restore()，能起到保存绘制状态和防止污染状态栈。养成一个良好的习惯。 此时一脸蒙逼！因为我并不知道这两个东东是什么意思，怎么使用？ 后来翻了书，也只是提到了在Canvas中有save()和restore()两个方法，它们都是属于Canv
html5 画布保存,html5 (canvas)画布save()和restore()的理解和使用方法
weixin_39540023的博客
06-17 1090
首先取到绘画的上下文信息varcanvas=document.createElement('canvas');varcontext=canvas.getContext('2d');有这两个方法context.save();//保存当前画布状态context.restore()//恢复最近一近的画布保存状态主要是当对画布有如下转换操作之前可以先使用context.save();保存画布当前状态,...
JavaScript 练手小技巧：canvas 中 beginPath() 的重要性
九天翔龙的技术博客
02-02 2633
例1： <canvas id="cvs" width="400" height="400"></canvas> var ctx = document.getElementById('cvs').getContext('2d'); ctx.beginPath(); ctx.moveTo(100,50); ctx.lineTo(250,50); ctx.stroke(); ctx.moveTo(100,150); ctx.lineTo(250,150); ctx.strokeSt
class Player { constructor(x, y, radius, color, vector) { this.x = x; this.y = y; this.radius = radius; this.color = color; this.vector = vector; this.life = 3;//玩家生命值 } draw(ctx) { ctx.save(); ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fill(); ctx.closePath(); ctx.restore(); } resize(x, y) { this.x = x; this.y = y; } } class Enemy { constructor(x, y, radius, color, vector) { this.x = x; this.y = y; this.radius = radius; this.color = color; this.vector = vector; } draw(ctx) { ctx.save(); ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fill(); ctx.closePath(); ctx.restore(); } update() { this.x += this.vector.x; this.y += this.vector.y; } } 要为玩家添加生命值。判断敌人与玩家是否撞击，是则玩家的生命值减1当玩家生命值减到0时，游戏结束。
06-03
ctx.save(); ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fill(); ctx.closePath(); ctx.restore(); } resize(x, y) { this.x = ...
const anglePerChar = (Math.PI * 4 / 3) / Math.max(companyName.length - 1, 1); const startAngle = (5 * Math.PI) / 6; // companyName.split("").forEach((char, i) => { // ctx.save(); // ctx.rotate(startAngle + anglePerChar * i); // ctx.translate(radius - 20, 0); // ctx.rotate(Math.PI / 2); // ctx.fillText(char, 0, 0); // ctx.restore(); // }); 把以上代码做成在圆圈的底部
最新发布
08-08
ctx.save(); ctx.rotate(i); // 旋转画布 ctx.translate(radius - 20, 0); // 平移到圆边缘 ctx.rotate(30); // 二次旋转（示例角度） ctx.textBaseline = "bottom"; // 新增：设置文本基线为底部对齐 ctx.fillText...
ctx.save 对canvas
10-18
`ctx.save()` 是 Canvas API 中的一个重要方法，它用于保存当前图形上下文的状态。在绘制过程中，如果需要执行一些操作，比如变换、颜色设置等，先调用 `save()` 可以将当前的状态记录下来，然后可以继续进行其他...
解释下面代码意思function getLine(bubbles) { var line = []; for (var i = 0; i < bubbles.length; i++) { var b = bubbles[i]; if (b.color == color) { line.push({ "x": b.x, "y": b.y }); } else { if (line.length < 5) line = []; else return line; } } if (line.length < 5) return []; return line; } }, draw: function () { var ctx = game.ctx; ctx.save(); ctx.translate(this.startX, this.startY); ctx.beginPath(); for (var i = 0; i <= game.cellCount; i++) { var p1 = i * game.cellWidth;; ctx.moveTo(p1, 0); ctx.lineTo(p1, this.height); var p2 = i * game.cellWidth; ctx.moveTo(0, p2); ctx.lineTo(this.width, p2); } ctx.strokeStyle = "#555"; ctx.stroke(); //绘制子元素（所有在棋盘上的泡） this.bubbles.forEach(function (row) { row.forEach(function (bubble) { bubble.draw(); }); }); ctx.restore(); }, isMoving: false,
06-10
这段代码是一个 JavaScript 对象的一个方法，其中包括了三个部分: 1. `getLine` 方法：该方法接受一个参数 `bubbles`，用于获取一条颜色相同的球的连续线，返回一个由坐标组成的数组。该方法通过迭代棋盘上的所有泡...
canvas理解：一看就懂的save和restore
YMX2020的博客
07-06 6677
一看就懂的save和restore save：用来保存最近一次的Canvas的状态。 restore：用来获取save保存的Canvas之前的状态。防止save后对Canvas执行的平移、放缩、旋转、错切、裁剪等可以改变画布的操作对后续的绘制的影响。 下面我会从颜色属性接平移属性对save和restore做解析，至于其他的放缩、旋转、错切、裁剪我就不一一说明，原理都是一样的，感兴趣的自行实验 颜色属性 <script> const canvas = document.getEleme
Canvas beginPath()、moveTo()、 lineTo() 、stroke() 绘制直线路径，fillText() 绘制填色的文本
蚩尤后裔-汪茂雄
12-07 6391
目录 直线路径 API 方法 绘制路径编码示例 canvas fillText() 填充文本 直线路径 API 方法 beginPath() 方法 beginPath() 方法开始一条路径，或重置当前的路径。 提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。 提示...
HTML5 canvas save和restore方法讲解
appteam_vlctech的专栏
10-08 1501
save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的，都没有参数。 Canvas 状态是以堆(stack)的方式保存的，每一次调用 save 方法，当前的状态就会被推入堆中保存起来。这种状态包括：当前应用的变形（即移动，旋转和缩放，见下）: strokeStyle, fillStyle, globalAlpha, lineWi
canvas使用之beginPath()函数踩坑记
CjmHW的博客
02-20 5405
先贴上网上看到的博客，侵删。 &amp;lt;canvas id=&quot;myCanvas&quot; width=&quot;300&quot; height=&quot;300&quot; style=&quot;border:1px solid #000000;&quot;&amp;gt; 您的浏览器不支持 HTML5 canvas 标签。 &amp;lt;/canvas&amp;gt;
【Html5每日练习】canvas beginPath()的理解
热门推荐
boia
04-11 1万+
路径是canvas里很重要的一个概念，刚开始学canvas的人对路径理解不是很深，他们在用canvas的时候会乱用beginPath(),今天做了一个小demo来说明一下路径 看代码: var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); con
canvas中beginPath()与closePath()的使用
weixin_33883178的博客
12-28 683
2019独角兽企业重金招聘Python工程师标准>>> ...
Canvas save、restore方法
一个有味道的Weber
10-08 708
Canvas save(),restore()方法 save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的，都没有参数。 每一次调用 save 方法，当前的状态就会被推入堆中保存起来。这种状态包括： 当前应用的变形（即移动，旋转和缩放）strokeStyle, fillStyle, globalAlpha, lineWidth, lineC
canvas中的save和restore方法的作用
shidaping的博客
12-04 1093
save方法可以理解为暂存当前画笔的状态，接下来对画笔的操作都不会被保存下来，直到restore方法被调用。讲得通俗一点，就是说，调用save方法，就是把当前的笔放笔架上，换一支笔，调用restore方法时，再把刚才放到笔架上的笔再拿下来用。我们来看一个例子。<!DOCTYPE html> <html> <head> <title></title> <style> #myCanvas{
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值