canvas换图时候会闪烁_详解Canvas动画部分

作者：Army-海军

https://blog.csdn.net/weixin_41229588/article/details/107016224

状态的保存和恢复

save()

保存画布(canvas)的所有状态

restore()

    save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

    Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括：

• 当前应用的变形(即移动，旋转和缩放，见下)。

• 以及下面这些属性：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled

• 当前的裁切路径(clipping path)

    你可以调用任意多次 save方法。每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。

save 和 restore 的应用例子

function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');  ctx.fillRect(0,0,150,150);   // 使用默认设置绘制一个矩形  ctx.save();                  // 保存默认状态  ctx.fillStyle = '#09F'       // 在原有配置基础上对颜色做改变  ctx.fillRect(15,15,120,120); // 使用新的设置绘制一个矩形  ctx.save();                  // 保存当前状态  ctx.fillStyle = '#FFF'       // 再次改变颜色配置  ctx.globalAlpha = 0.5;      ctx.fillRect(30,30,90,90);   // 使用新的配置绘制一个矩形  ctx.restore();               // 重新加载之前的颜色状态  ctx.fillRect(45,45,60,60);   // 使用上一次的配置绘制一个矩形  ctx.restore();               // 加载默认颜色配置  ctx.fillRect(60,60,30,30);   // 使用加载的配置绘制一个矩形}

    第一步是用默认设置画一个大四方形，然后保存一下状态。改变填充颜色画第二个小一点的蓝色四方形，然后再保存一下状态。再次改变填充颜色绘制更小一点的半透明的白色四方形。

    一旦我们调用 restore，状态栈中最后的状态会弹出，并恢复所有设置。如果不是之前用 save 保存了状态，那么我们就需要手动改变设置来回到前一个状态，这个对于两三个属性的时候还是适用的，一旦多了，我们的代码将会猛涨。

    当第二次调用 restore 时，已经恢复到最初的状态，因此最后是再一次绘制出一个黑色的四方形。

translate移动

translate 方法，它用来移动 canvas 和它的原点到一个不同的位置。

translate(x, y)

translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量

    例子 平移之后画个圆，然后恢复状态，再平移再画个圆，再恢复状态，每次都画在原点上，每次原点都不在一个位置上

function draw3() {
      var ctx = document.getElementById('canvas').getContext('2d');  for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
          ctx.save();      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';      ctx.translate(10 + j * 50, 10 + i * 50);      ctx.beginPath();      ctx.arc(0, 0, 10, 0, Math.PI*2, true);      ctx.fill();      ctx.restore();    }  }}

旋转Rotating

rotate 方法，它用于以原点为中心旋转 canvas

rotate(angle)

    这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。

    旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法。

    来个例子，记住是坐标系旋转，想问题的时候要想清楚  此案例先把中心移到了圆的中心

function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');  ctx.translate(75,75);  for (var i=1;i<6;i++){ // Loop through rings (from inside to out)    ctx.save();    ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';    for (var j=0;j6;j++){       ctx.rotate(Math.PI*2/(i*6));      ctx.beginPath();      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);      ctx.fill();    }    ctx.restore();  }}