canvas中的save()方法以及restore()方法

最新推荐文章于 2023-04-25 16:56:41 发布
最新推荐文章于 2023-04-25 16:56:41 发布
阅读量2.4k 收藏 5
点赞数 2
分类专栏： html javascript 文章标签： html canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36949892/article/details/93761930
版权

canvas中的save()方法

  1. save()和restore()方法要一起使用才会有效果。
  2. save()方法就是保存你在save()中设置的各种样式以及属性。

举个例子

首先我在save的方法中创建了一个盒子

<body>
	<canvas id="" width="600" height="400"></canvas>;
</body>
<script type="text/javascript">
	var pen = document.querySelector('canvas').getContext('2d');
	// 调用save方法
	pen.save();
	// 改变基点的位置
	pen.translate(300,300);
	// 设置填充颜色
	pen.fillStyle = 'red';
	pen.fillRect(0,0,100,100);
	pen.restore();
</script>

在这里插入图片描述

可以看到我将颜色的样式以及基点都设置进去了

当我再在restore后面添加一个盒子的时候

<body>
	<canvas id="" width="600" height="400"></canvas>;
</body>
<script type="text/javascript">
	var pen = document.querySelector('canvas').getContext('2d');
	// 调用save方法
	pen.save();
	pen.translate(300,300);
	// 设置填充颜色
	pen.fillStyle = 'red';
	pen.fillRect(0,0,100,100);
	pen.restore();
	// 这里我在创建一个盒子
	pen.beginPath();
	pen.fillStyle = 'black';
	pen.fillRect(0,0,100,100);
	pen.fill();
</script>

在这里插入图片描述

这里就发现了我在save方法外面设置的属性对save中的没有任何影响，并且save中的基点的设置也对save方法外设置的盒子没有任何影响。

总结：save方法相当于将我设置的内容隔离出来，不会对外面的任何内容造成影响。

卖萌_先森
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
理解Canvas的save()和restore()方法
csdn_zsdf的博客
03-24 1168
❑ save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 ❑ restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。 save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error通俗地讲，canvas中的
canvas 的save()和restore()
Tiny2017的博客
07-22 2842
save()保存当前Canvas画布状态并放在栈的最上面，可以使用restore()方法依次取出。 注意：栈是先入后出，每次restore()取出的画布状态都是最近save()的画布状态 保存的画布状态有以下这些： 当前矩阵变换。参见transform()等。 当前剪裁区域。参见clip()。 当前虚线设置。参见setLineDash()。 以及下面这些属性的值：strokeStyle，fillStyle，globalAlpha，lineWidth，lineCap，lineJoin，miterLimit，l
canvas状态的保存(save)和恢复(restore)
热门推荐
qq_33721778的博客
01-12 1万+
canvas的状态如何保存和恢复 save():保存当前的绘图状态。 restore():恢复之前保存的绘图状态。 调用save方法将当前绘图状态保存到绘图堆栈中，每次调用restore方法从栈顶取出保存的状态。 由于出栈的次数不能多于入栈的次数，故程序中restore方法调用的次数不应该比save方法多。 save都可以保存什么？ 当前的坐标变换信息（比如旋转rotate()或平移setTransform()） 当前剪贴区域 图形上下文对象（CanvasRenderingContext2D）的当前属
canvas 中save() 和restore()
TXW6666的博客
09-27 2397
save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的，都没有参数。 canvas.save()用来保存先前状态的 canvas.restore()用来恢复之前保存的状态 注：两种方法必须搭配使用，否则没有效果 对canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作， 默认情况下那么每一次绘图都会在上一次的基础上进行操作，最后导致错位。 比如说你相对于原点30度递增旋转，30，60，90.如果不使用save 以及 restore 就会变
[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
weixin_33739627的博客
09-27 148
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念。掌握理解他们是做出复杂canvas动画必要的基础之一. 再谈clip函数，这个函数在这篇文章[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)已经有讲到过他的基...
Canvas详解
墨玉浮白的博客
12-05 489
文章目录一、概念二、常用api类型2.1 绘制集合图形，文本，位图等2.2 位置、形状变换2.2.1 平移操作2.2.2 缩放操作2.2.3 旋转操作2.2.4 倾斜操作2.2.5 切割2.2.6 矩阵2.3 状态保存和恢复三、案例 一、概念 画布，通过画笔绘制几何图形、文本、路径和位图等。 二、常用api类型 常用api分为绘制、变换、状态保存和恢复 2.1 绘制集合图形，文本，位图等 //在指...
android中canvas的save和restore用法
02-19
`save()`和`restore()`是`Canvas`类中两个非常重要的方法，它们用于管理和恢复绘图状态，确保复杂的绘图操作能够正确无误地进行。在本文中，我们将深入探讨这两个方法的用法、原理以及它们在实际开发中的应用。 `...
Android中Canvas的常用方法总结
09-01
- **恢复状态**：`restore()`方法将Canvas恢复到最近一次调用`save()`的状态。如果需要恢复到特定保存点，可以使用`restoreToCount(int saveCount)`。 6. **Canvas画图实例** - 除了矩形和文本，Canvas还可以绘制...
Android canvas.save()和canvas.restore()的理解
03-08
`save()`和`restore()`是`Canvas`中两个非常关键的方法，它们主要用于管理绘图状态，确保复杂绘图过程中的可逆性和精确性。在本文中，我们将深入理解这两个方法的作用以及如何在实际应用中使用它们。 首先，`canvas...
canvas绘制圆角头像的实现方法
12-09
它接受五个参数：`ctx`（渲染上下文），`img`（头像图片），`x`（图片左上角的x坐标），`y`（图片左上角的y坐标）以及`r`（圆角半径）。 ```javascript // r: 半径 function circleImg(ctx, img, x, y, r) { ctx....
html5的canvas方法使用指南
01-21
canvas的方法  save()保存当前环境的状态  restore() 返回之前保存过的路径状态和属性  createEvent()  getContext()返回一个对象,指出访问绘图功能必要的API  toDataUPL() 返回canvas图像的URL 线条样式的属性...
canvas像素操作、save与restore、合成与变形
ayhg1的博客
06-21 537
一、canvas像素操作 （1）获取图像像素 imageData = ctx.getImageData(x,y,w,h) imageData 对象 width height data getImageData返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据 获取图像像素后的imageData中包含三项： 其中宽高分别为获取图像宽高时的大小，data则存放的是在该大小内所有的像素点的详细信息。data是一个数组，每四位秒数一个像素点，分别代表rgba。例如
canvas save()和canvas restore()状态的保存和恢复使用方法及实例
dayewandou的博客
10-13 6705
新的一天又来啦，最近这些天一直是阴雨连绵的，也是醉了，不过还好今天终于可以看到灿烂的阳光了，现在这种温度，最喜欢站在太阳下晒着太阳，身上暖暖的，心情也会好很好，o(￣︶￣)o 好啦，不扯这些闲篇了，进入正题吧，今天分享下 canvas.save()和canvas.restore()状态的保存和恢复使用方法及实例canvas.save()用来保存先前状态的 canvas.restore()用来恢
Android中canvas.save()和canvas.restore()的使用
疾风剑豪
03-15 748
自己定义控件时经常遇到重写View的Ondraw()方法，Ondraw()方法经常设计到save()和restore()这两个方法.这两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的。 详细作用例如以下： 1.save()：用来保存Canvas的状态,save()方法之后的代码，能够调用Canvas的平移、放缩、旋转、裁剪等操作！ 2.restore()：用来恢复Canv...
canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
最新发布
lmrylll的博客
04-25 698
在上一篇日志“canvas 图片拖拽旋转之一”中，对坐标转换有了比较深入的了解，但是仅仅利用坐标转换实现的拖拽旋转，会改变canvas坐标系的状态，从而影响画布上其他元素的绘制。因此，这个时候需要用到一对canvas方法，在变换坐标系前保存canvas状态，在变换并绘制完成之后，恢复canvas状态，即save()和restore()。save() 把当前状态推入到栈中，而 restore() 从栈的顶端弹出最近保存的状态，并且根据这些存储的值来设置当前绘图状态。
前端：JS/38/canvas状态的保存和恢复（canvas常用状态大全），canvas画布中图像的变形
Java_53的博客
05-22 1343
状态的保存和恢复 Saving and restoring state 在了解变形之前，我先介绍两个在你开始绘制复杂图形时必不可少的方法。 canvas.save() 保存画布(canvas)的所有状态 canvas.restore() save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。 Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括： 当前应用的变形
canvas里面save() 和restore()
一个无聊的前端写点无聊的东西
04-12 421
canvas.save()和canvas.restore()是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的。 Canvas相当于一块画布，该类中常用的方法如下： drawRect(RectF rect, Paint paint) drawPath(Path path, Paint paint) drawBitmap(Bitmap bitmap, Rect src, Rect ds...
canvas.save()和canvas.restore()的理解
weijinqian0的博客
04-12 609
群里一哥们面试的时候被问到canvas.restore()的作用是什么，与之常常被一起问到的是canvas.save()的作用是什么。最近在上海开发航运项目，忙里偷闲总结一下两个方法的用法，以后也将在博客中记录面试中可能会被问到的一些其他问题。Canvas相当于一块画布，该类中常用的方法如下：drawRect(RectF rect, Paint paint)drawPath(Path path, ...
Canvas常用语法详解
SeekerTime
04-19 946
Canvas是HTML5的新增标签，通过创建画布，在画布上创建任何想要的形状。 一、标签原型<canvas width="1000" height="1000" id="demo"> 您的浏览器版本太低，不支持HTML5新增的canvas标签！ </canvas> 使用js获取画布，并指定对象<script> var demo = document.getElementById
canvas中的save和restore
03-16
canvas中的save和restore是用于保存和恢复绘图状态的方法。 save方法可以将当前的绘图状态保存到一个栈中，以便后续的操作可以使用该状态。在save方法之后，可以进行一些绘图操作，如设置颜色、线条宽度等。这些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值