canvas save()和canvas restore()状态的保存和恢复使用方法及实例

最新推荐文章于 2024-07-12 15:10:34 发布
最新推荐文章于 2024-07-12 15:10:34 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： canvas

canvas.save()和canvas.restore()状态的保存和恢复使用方法及实例

canvas.save()用来保存先前状态的 
canvas.restore()用来恢复之前保存的状态 
注：两种方法必须搭配使用，否则没有效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        var canvas=document.querySelector('canvas');
        var ctx=canvas.getContext('2d');
        ctx.save();//状态的保存
        ctx.setLineDash([5]);
        ctx.lineWidth=4;
        ctx.strokeStyle='red';
        ctx.strokeRect(50,50,300,300);

        ctx.restore();//状态的恢复
        ctx.arc(400,300,150,0,2*Math.PI);
        ctx.stroke();
    </script>
</body>
</html>

MakeGreatEffort
关注
专栏目录
理解Canvas的save()和restore()方法
csdn_zsdf的博客
03-24 1213
❑ save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 ❑ restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。 save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error通俗地讲，canvas中的
理解canvas中的save()和restore()
jinxi1112的博客
02-28 327
绘图过程中如果只想对部分图形执行某操作，将该图形的绘制过程使用save()和restore()包裹起来，后续其它元素的绘制将不受影响。
JavaScript-canvas(画布)初识、刮刮卡简单练习
最新发布
2301_82244509的博客
07-12 613
效果图save用于保存当前的画布状态，restore将画布状态重置到save保存时的样子。画布状态分为画布的坐标(transform)，画布绘制区域(clip)，画布中设置的组合方式(globalCompositeOperatio)。当我们在使用transform,clip和globalCompositeOperatio时会改变画布的状态，而这种改变会影响到接下来的画布绘制操作，所以在进行这种操作前需要使用save来对画布进行一次保存，在进行改变状态后的下一步操作中使用restore来重置画布状态。效果图。
canvas里面save() 和restore()
一个无聊的前端写点无聊的东西
04-12 432
canvas.save()和canvas.restore()是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的。 Canvas相当于一块画布，该类中常用的方法如下： drawRect(RectF rect, Paint paint) drawPath(Path path, Paint paint) drawBitmap(Bitmap bitmap, Rect src, Rect ds...
搞懂 ctx.restore();ctx.save()；ctx.beginPath();
guitarist0505的博客
07-17 1万+
在做canvas时钟时，ctx.restore();ctx.save()；ctx.beginPath();反复用到！ 那么，这几个函数到底是什么功能呢?有什么区别和联系呢？ 1.beginPath() w3c上的解释：beginPath() 方法在一个画布中开始子路径的一个新的集合。 也就是说，运行到这个函数时，context中止当前的路径，立刻把当前的坐标设置为起点(0,0)，开始一条新...
实例讲解利用HTML5 Canvas API操作图形旋转的方法
12-14
在这个过程中，`save()`和`restore()`方法用于保存和恢复画布的状态，确保其他绘制操作不受旋转的影响。以下是一个示例代码片段： ```javascript ctx1.save(); ctx1.translate(xpos, ypos); // 移动到图像中心 ctx1...
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
09-28
5. Canvas上下文保存与恢复：文档中的JavaScript代码使用了ctx.save()和ctx.restore()方法。这些方法允许你保存Canvas的当前状态，然后在之后恢复它，这对于在同一个Canvas上绘制多个独立图形非常有用。 6. Canvas...
Android 游戏开发之Canvas画布的介绍及方法
01-20
同时，save和restore方法用于管理绘图状态，比如在旋转特定对象时，先保存当前状态，旋转后恢复，这样就不会影响其他未旋转的对象。 示例代码中的`getHolder().lockCanvas()`用于获取SurfaceView的Canvas对象，这是...
JS+canvas画一个圆锥实例代码
10-18
- save() 和 restore()：保存和恢复Canvas状态。 在实例代码中，定义了一个名为`Cone`的函数，用于绘制圆锥形。`Cone`函数接受多个参数，包括Canvas上下文（ctx）、圆锥在Canvas上的原点坐标（x,y）、圆锥的宽度（w...
Android中Canvas的常用方法总结
09-01
在Android开发中，自定义View是一项...通过合理地管理状态保存和恢复，可以确保多个图形操作之间的状态不会相互影响，从而实现精确的绘制控制。了解并熟练运用这些Canvas方法，是提升Android自定义View开发能力的关键。
canvas状态的保存(save)和恢复(restore)
qq_33721778的博客
01-12 1万+
canvas的状态如何保存和恢复 save():保存当前的绘图状态。 restore():恢复之前保存的绘图状态。 调用save方法将当前绘图状态保存到绘图堆栈中，每次调用restore方法从栈顶取出保存的状态。 由于出栈的次数不能多于入栈的次数，故程序中restore方法调用的次数不应该比save方法多。 save都可以保存什么？ 当前的坐标变换信息（比如旋转rotate()或平移setTransform()） 当前剪贴区域 图形上下文对象（CanvasRenderingContext2D）的当前属
弄懂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 canvas save和restore方法讲解
appteam_vlctech的专栏
10-08 1446
save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的，都没有参数。 Canvas 状态是以堆(stack)的方式保存的，每一次调用 save 方法，当前的状态就会被推入堆中保存起来。这种状态包括：当前应用的变形（即移动，旋转和缩放，见下）: strokeStyle, fillStyle, globalAlpha, lineWi
canvas笔记六---变形
qq_40434213的博客
05-28 167
1、状态的保存和恢复 Saving and restoring state save() 保存画布(canvas)的所有状态，状态指的是当前画面应用的所有样式和变形的一个快照 restore() save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数 每次调用save相当于保存当前状态并压入栈中，调用restore，状态栈中顶层的状态回弹出，并恢复所有状态 save和restore的使用示例 var ctx = document.getElementById(‘canvas’)
canvas.save() canvas.restore() 作用
热门推荐
我的专栏
11-03 6万+
暂时先看此博客,待以后再研究 这里canvas.save();和canvas.restore();是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的。这里稍微解释一下，   当我们对画布进行旋转，缩放，平移等操作的时候其实我们是想对特定的元素进行操作，比如图片，一个矩形等，但是当你用canvas的方法来进行这些操作的时候，其实是对整个画布进行了操作，那么之后在画布上的元素都会受到
Android save方法,Android Canvas的save(),saveLayer()和restore()
weixin_29920889的博客
05-25 830
1.在自定义控件当中你onMeasure和onLayout的工作做完成以后就该绘制该控件了，有时候需要自己在控件上添加一些修饰来满足需求复写onDraw(Canvas canvas),其中Canvas就像是一块画布，你自定义控件的样式就是在它上面完成的。Canvas ，Paint等基本概念就不赘述了。2.下面就直接用demo来解释标题列出的方法先介绍save()和saveLayer()save()...
canvas 中save() 和restore()
TXW6666的博客
09-27 2452
save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的，都没有参数。 canvas.save()用来保存先前状态的 canvas.restore()用来恢复之前保存的状态 注：两种方法必须搭配使用，否则没有效果 对canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作， 默认情况下那么每一次绘图都会在上一次的基础上进行操作，最后导致错位。 比如说你相对于原点30度递增旋转，30，60，90.如果不使用save 以及 restore 就会变
Android canvas.save()与canvas.restore()的使用总结
Nothing
10-10 1万+
含义 canvas.save(); 画布将当前的状态保存 canvas.restore(); 画布取出原来所保存的状态 使用 canvas.save();与canvas.restore();一般结合使用，.save()函数在前，.restore()函数在后，用来保证在这两个函数之间所做的操作不会对原来在canvas上所画图形产生影响。比如下面这张图： 蓝色方块里面有三张图，两张正常画，一张倾斜4...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值