Canvas 状态保存(save()),状态回滚(restore())

原创 2018年04月15日 13:45:54

状态保存:保存的是线宽、颜色、线帽、坐标轴的状态(平移、旋转、缩放的状态)等。(保存在栈的结构中)


demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 状态保存:
        * ctx.save();
        * 把当前的状态(绘制环境的所有属性(线宽、颜色、线帽等))copy一份进行保存。
        * */

        /*
        * 状态回滚(恢复):
        * ctx.restore();
        * 把最近保存的一次状态作为当前状态。  (保存与回滚类似栈的结构)
        * */

        ctx.save();

        // 修改状态
        ctx.lineWidth = 10;
        ctx.strokeStyle = 'blue';
        ctx.lineCap = 'round';

        // 修改状态之后绘制一条线
        ctx.moveTo( 10, 10 );
        ctx.lineTo( 310, 10 );
        ctx.stroke();

        ctx.save();

        // 修改状态
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'pink';

        // 修改状态之后再绘制一条线
        ctx.beginPath();
        ctx.moveTo( 10, 50 );
        ctx.lineTo( 310, 50 );
        ctx.stroke();

        // 回滚
        ctx.restore();

        // 回滚之后再绘制一条线
        ctx.beginPath();
        ctx.moveTo( 10, 100 );
        ctx.lineTo( 310, 100 );
        ctx.stroke();

        // 再回滚
        ctx.restore();

        // 再回滚之后再绘制一条线
        ctx.beginPath();
        ctx.moveTo( 10, 150 );
        ctx.lineTo( 310, 150 );
        ctx.stroke();
    </script>
</body>
</html>


深入 WIN2000 组册表 (3)

                 测某个计算机管理Snap-In是否可用尽管M i c r o s o f t提供了一组重要的M M C工具,但是为Windows 2000提供服务应用程序的供应商通常...
  • coolstar
  • coolstar
  • 2001-08-01 13:37:00
  • 1110

Canvas的save和restore方法简单理解

android的Canvas就是画布,用各种draw方法绘制时始终采用是画布的坐标。 默认情况下,屏幕和画布的坐标一致,都是横向x,纵向y,左上角是起点坐标(0,0)。   下面代码将在屏幕顶部...
  • wkkyo
  • wkkyo
  • 2016-03-02 23:00:06
  • 7409

弄懂canvas中的save和restore

一直以来没有特别明白canvas中的save()和restore()函数,这次终于通过微信小程序中使用此函数的时候弄明白了,以下代码可以运行在微信小程序中~~看效果:代码:const ctx = wx...
  • laokdidiao
  • laokdidiao
  • 2016-12-26 18:58:58
  • 2092

canvas的save与restore方法的作用

网上搜罗了一堆资料,最后总结一下。 save:用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 restore:用来恢复Canvas之前保存的状态...
  • u014788227
  • u014788227
  • 2016-08-19 14:42:36
  • 6920

canvas的save,restore方法的使用理解

笔者最近在研究android上的动画机制,最近有点偏题,偏到View draw过程了。。。 view的draw中经常用到canvas的save方法和restore方法。网上找的一些文章讲的都不透彻,...
  • tingfengzheshuo
  • tingfengzheshuo
  • 2016-06-18 16:06:25
  • 3815

html5 canvas学习--canvas保存于恢复状态

// 获取canvas对象   var c = document.getElementById("myCanvas"); // 获取conte...
  • W3Chhhhhh
  • W3Chhhhhh
  • 2016-10-07 20:18:38
  • 1449

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

新的一天又来啦,最近这些天一直是阴雨连绵的,也是醉了,不过还好今天终于可以看到灿烂的阳光了,现在这种温度,最喜欢站在太阳下晒着太阳,身上暖暖的,心情也会好很好,o( ̄︶ ̄)o 好啦,不扯这些闲篇了,...
  • dayewandou
  • dayewandou
  • 2017-10-13 21:03:03
  • 244

android_浅析canvas的save()和restore()方法

绘图之前,首先需要调整画笔,待画笔调整好之后,再将图像绘制到画布上,这样才可以显示在手机屏幕上!Android 中的画笔是 Paint类,Paint 中包含了很多方法对其属性进行设置,主要常用方法: ...
  • dadaxiaoxiaode
  • dadaxiaoxiaode
  • 2013-05-14 19:55:30
  • 7390

Android Canvas save() restore()

Android Canvas save restore
  • csm_qz
  • csm_qz
  • 2016-03-20 11:53:01
  • 659

自定义View之路——Canvas(save,restore,translate,rotate)

这章说Canvas,Paint是画笔,有画笔当然也得有画布才能往上作画了,Canvas就是画布,这很好理解。 Canvas给我们提供了很多实用的API,可以画各种图形,文字,图片等,接下来我会一一介...
  • u013627830
  • u013627830
  • 2016-06-24 15:09:05
  • 679
收藏助手
不良信息举报
您举报文章:Canvas 状态保存(save()),状态回滚(restore())
举报原因:
原因补充:

(最多只允许输入30个字)