canvas中的save和restore方法的作用

最新推荐文章于 2022-08-08 12:46:55 发布
最新推荐文章于 2022-08-08 12:46:55 发布
阅读量996 收藏
点赞数
分类专栏： web前端 canvas 文章标签： canvas save restore
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shidaping/article/details/78707300
版权

save方法可以理解为暂存当前画笔的状态，接下来对画笔的操作都不会被保存下来，直到restore方法被调用。讲得通俗一点，就是说，调用save方法，就是把当前的笔放笔架上，换一支笔，调用restore方法时，再把刚才放到笔架上的笔再拿下来用。我们来看一个例子。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  #myCanvas{
    width: 500px;
    height: 300px;
  }
  </style>
</head>
<body>
<canvas id="myCanvas"/>
<script>
var canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillRect(20,20,50,50);
ctx.save()
ctx.fillStyle="#0000ff";
ctx.fillRect(80,20,50,50);
ctx.restore();
ctx.fillRect(140,20,50,50);
</script>
</body>
</html>

当我们完第一个黑色正方形后，调用save方法，把黑笔放笔架上。
然后把颜色换成蓝色，画第二个蓝色正方形。
再调用restore方法，换回刚才的黑笔，再画一个正方形，发现果然还是黑色的。

shidaping
关注
专栏目录
android中canvas的save和restore用法
02-19
`save()`和`restore()`是`Canvas`类中两个非常重要的方法，它们用于管理和恢复绘图状态，确保复杂的绘图操作能够正确无误地进行。在本文中，我们将深入探讨这两个方法的用法、原理以及它们在实际开发中的应用。 `...
搞懂 ctx.restore();ctx.save()；ctx.beginPath();
guitarist0505的博客
07-17 1万+
在做canvas时钟时，ctx.restore();ctx.save()；ctx.beginPath();反复用到！ 那么，这几个函数到底是什么功能呢?有什么区别和联系呢？ 1.beginPath() w3c上的解释：beginPath() 方法在一个画布中开始子路径的一个新的集合。 也就是说，运行到这个函数时，context中止当前的路径，立刻把当前的坐标设置为起点(0,0)，开始一条新...
Canvas学习：save()和restore()
wulixiaoxiao1的博客
03-18 1866
本来今天想开始学习怎么在Canvas中绘制矩形。但昨天发朋友圈，聊到Canvas。有网友提醒我将所有绘制的东西放在ctx.save()和ctx.restore()，能起到保存绘制状态和防止污染状态栈。养成一个良好的习惯。 此时一脸蒙逼！因为我并不知道这两个东东是什么意思，怎么使用？ 后来翻了书，也只是提到了在Canvas中有save()和restore()两个方法，它们都是属于Canv
详解Canvas动画部分
热门推荐
Army-海军的博客
06-29 2万+
本文包括缩放，平移，旋转、动画等复杂动画
canvas学习-1
sharryling
01-20 219
1.ctx.save() 和 ctx.restore()的使用 因为ctx是一个全局对象，ctx.save()的时候保存了ctx当前的状态值，然后你执行了一些值的修改，比如改变阴影大小，在函数最后调用ctx.restore()方法将ctx之前的状态值还原回去。 当楼主注释掉save和restore后，这时调用draw函数时ctx的画笔状态就不会保存与还原 2.星星 月亮 流星 canvas的...
html5的canvas的使用步骤,HTML5 Canvas的基本用法介绍
weixin_39647773的博客
06-15 397
本篇文章给大家带来的内容是关于HTML5 Canvas的基本用法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。canvas 是 HTML5 当中我最喜欢的所有新特性中我最喜欢的一个标签了。因为它太强大了，各种有意思的特效都可以实现。1. canvas 的基本使用方法- 它是一个行内块元素- 默认大小是 300 x 150，不能在 css 里给他设置样式，只能在标签内写它的属性...
Android canvas.save()和canvas.restore()的理解
03-08
`save()`和`restore()`是`Canvas`中两个非常关键的方法，它们主要用于管理绘图状态，确保复杂绘图过程中的可逆性和精确性。在本文中，我们将深入理解这两个方法的作用以及如何在实际应用中使用它们。 首先，`canvas...
android 中canvas的save和resotre用法
02-19
`save()`和`restore()`是Canvas的重要方法，用于保存和恢复绘图状态，这对于实现复杂的图形变换、绘制流程控制以及避免不必要的计算至关重要。下面将详细阐述这两个方法的用法和应用场景。 1. `save()`方法： `save...
微信小程序小技巧系列《十一》canvas中的save和restore，view使用bindtap传值 ...
03-29
一：canvas中的save和restore   一直以来没有特别明白canvas中的save()和restore()函数，这次终于通过微信小程序中使用此函数的时候弄明白了，以下代码可以运行在微信小程序中~~ 看效果： (此图片来源于网络，如有...
Android中Canvas的常用方法总结
09-01
- **恢复状态**：`restore()`方法将Canvas恢复到最近一次调用`save()`的状态。如果需要恢复到特定保存点，可以使用`restoreToCount(int saveCount)`。 6. **Canvas画图实例** - 除了矩形和文本，Canvas还可以绘制...
canvas状态的保存(save)和恢复(restore)
qq_33721778的博客
01-12 1万+
canvas的状态如何保存和恢复 save():保存当前的绘图状态。 restore():恢复之前保存的绘图状态。 调用save方法将当前绘图状态保存到绘图堆栈中，每次调用restore方法从栈顶取出保存的状态。 由于出栈的次数不能多于入栈的次数，故程序中restore方法调用的次数不应该比save方法多。 save都可以保存什么？ 当前的坐标变换信息（比如旋转rotate()或平移setTransform()） 当前剪贴区域 图形上下文对象（CanvasRenderingContext2D）的当前属
HTML5 canvas save和restore方法讲解
appteam_vlctech的专栏
10-08 1446
save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的，都没有参数。 Canvas 状态是以堆(stack)的方式保存的，每一次调用 save 方法，当前的状态就会被推入堆中保存起来。这种状态包括：当前应用的变形（即移动，旋转和缩放，见下）: strokeStyle, fillStyle, globalAlpha, lineWi
canvas像素操作、save与restore、合成与变形
啨天的博客
08-08 641
如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！:Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。:每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。(类似数组的pop())其中宽高分别为获取图像宽高时的大小，data则存放的是在该大小内所有的像素点的详细信息。注意：创建一个ImageData对象，默认创建出来的是个透明的。第三部：书写点击事件函数，获取A画布内容，渲染到B画布中。...
canvas动态画一条不同颜色的线
黑黑黑眼圈博客
08-15 5973
问题描述 ##使用canvas动态画一条颜色不同的线，即前五个点连成一条黑线后五个点连成一条红线，并且动态呈现。 思路呈现 首先，了解非动态画一条不同颜色的线。 代码展示： <script> //demo1 不渐变线条 var c = document.getElementById("myCanvas"); var ctx = c.getContex...
echart在ios部分机型报错null is not object(evaluating 'ctx.save')问题解决方法
Quan的博客
12-03 3897
触发背景：    在使用wex5平台开发和使用xcode打包后的app上点击返回键再进去加载echart图反复3次左右必现 报错如图   解决方法： 多次检查后，定位为退出页面后没有销毁原对象，再次进入渲染导致的问题 在代码里面加上离开页面，释放图表,销毁对象，然后就正常了 myChart.dispose(); 以上均为个人见解，如有错误欢迎各位大神留言...
web前端入门（三）-canvas添加事件响应
mrbbcool的博客
03-11 1411
html 中添加 canvas 元素后，可以给 canvas 元素添加 mousedown、mousemove等等事件响应函数，从而处理 canvas 事件。 然而，在 canvas 中绘制图形后，无法单独监听各图形的事件，只能在 canvas 事件响应函数中，判断鼠标是否在绘制的图形内，从而对各图形执行相应的事件操作。 function drawArc(x,y,rOut,rIn,s,e,ctx)...
弄懂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,
html5 restore,HTML5 canvas save和restore方法讲解
weixin_28676973的博客
06-22 436
save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的，都没有参数。 Canvas 状态是以堆(stack)的方式保存的，每一次调用 save 方法，当前的状态就会被推入堆中保存起来。这种状态包括：当前应用的变形(即移动，旋转和缩放，见下): strokeStyle, fillStyle, globalAlpha, lineWidthjav...
canvas的save和restore
最新发布
11-20
canvas的save和restore是用来保存和恢复Canvas状态的方法。在Canvas中，状态包括当前的绘图样式、变换矩阵、剪切区域等。通过save方法，可以将当前的状态保存到一个栈中，然后可以对Canvas进行平移、放缩、旋转、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值