zoukankan      html  css  js  c++  java
  • Canvas 状态的保存和恢复实例【每日一段代码25】

    <!DOCTYPE HTML>
    <html>
    <head>
    <title> save restore</title>
    <script type="text/javascript">
    function draw(){
    var cxt = document.getElementById("myCanvas").getContext("2d");
    cxt.fillRect(0,0,150,150);//绘制一个矩形
    cxt.save();//保存默认状态

    cxt.fillStyle="#06f";//改变设置颜色
    cxt.fillRect(15,15,120,120);//绘制新矩形

    cxt.save();//保存当前状态
    cxt.fillStyle="#FFF";//改变设置
    cxt.globalAlpha=0.5;
    cxt.fillRect(30,30,90,90);//绘制矩形

    cxt.restore();//恢复前一个状态
    cxt.fillRect(45,45,60,60);//按照前一个状态绘制矩形

    cxt.restore();//恢复原始状态
    cxt.fillRect(60,60,30,30);

    }
    </script>
    </head>
    <body onLoad="draw()">
    <canvas id="myCanvas"></canvas>
    </body>
    </html>

    显示效果如下:

    通过绘制多个矩形的例子来描述 canvas 的状态堆的工作原理。首先是用默认设置画一个大四方形,然后保存一下状态。改变填充颜色画第二个小一点的蓝色四方形,然后再保存一下状态。再次改变填充颜色绘制更小一点的半透明的白色四方形。到目前为止所做的动作和前面章节的都很类似。不过一旦调用 restore,状态堆中最后的状态会弹出,并恢复所有设置。如果不是之前用 save 保存了状态,那么我们就需要手动改变设置来回到前一个状态,这个对于两三个属性的时候还是适用的,一旦多了,工作量猛涨。当第二次调用 restore 时,已经恢复到最初的状态,因此最后是再一次绘制出一个黑色的四方形。】

  • 相关阅读:
    matlab cell
    matlab linux 快捷键设置——有问题还是要解决
    latex 小结
    TOJ 1258 Very Simple Counting
    TOJ 2888 Pearls
    HDU 1248 寒冰王座
    TOJ 3486 Divisibility
    TOJ 3635 过山车
    TOJ 1840 Jack Straws
    HDU 4460 Friend Chains
  • 原文地址:https://www.cnblogs.com/naokr/p/2362089.html
Copyright © 2011-2022 走看看