详解Canvas动画部分

我就是我 2023-02-21 06:27 144阅读 0赞

基础篇： [Html5中Canvas绘制、样式详解（不包含动画部分）][Html5_Canvas]

此篇为后续

**目录**

1. 状态的保存和恢复

2. translate移动

3. 旋转Rotating

4. 缩放Scaling

5. 图形相互交叉显示规则

6. 裁切路径

7. 动画基本步骤

8. canvas相关的动画js框架

--------------------

### 1.状态的保存和恢复 ###

**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);   // 使用加载的配置绘制一个矩形
    }

![20200629093334275.png][]

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

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

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

### 2. translate移动 ###

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

`translate(x, y)`

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

![20200629093712742.png][]

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

效果

![20200629094114993.png][]

### 3. 旋转Rotating ###

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

`rotate(angle)`

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

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

![20200629094416857.png][]

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

效果：

![20200629094843860.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70][]

### 4. 缩放Scaling ###

我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大

`scale(x, y)`

`scale ` 方法可以缩放画布的水平和垂直的单位。两个参数都是实数，可以为负数，x 为水平缩放因子，y 为垂直缩放因子，如果比1小，会比缩放图形， 如果比1大会放大图形。默认值为1， 为实际大小。

画布初始情况下， 是以左上角坐标为原点的第一象限。如果参数为负实数， 相当于以x 或 y轴作为对称轴镜像反转（例如， 使用`translate(0,canvas.height); scale(1,-1);` 以y轴作为对称轴镜像反转， 就可得到著名的笛卡尔坐标系，左下角为原点）。

默认情况下，canvas 的 1 个单位为 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。

`scale` 的例子

function draw6() {
      var ctx = document.getElementById('canvas').getContext('2d');
      ctx.save();
      ctx.scale(10, 3);
      ctx.fillRect(1, 10, 10, 10);
      ctx.restore();
    
      // 镜像x轴
      ctx.scale(-1, 1);
      ctx.font = '48px serif';
      ctx.fillText('海军', -135, 120);
    }

效果图

### ![20200629103755880.png][] ###

### 5. 图形相互交叉显示规则 ###

ctx.globalCompositeOperation = type

这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串。

**source-over**

这是默认设置，并在现有画布上下文之上绘制新图形。

![20200629104830653.png][]

**source-in**

新图形只在新图形和目标画布重叠的地方绘制。其他的都是透明的。

![20200629104916779.png][]

**source-out**

在不与现有画布内容重叠的地方绘制新图形。

![20200629104946133.png][]

**source-atop**

新图形只在与现有画布内容重叠的地方绘制。

![20200629105104962.png][]

destination-over

在现有的画布内容后面绘制新的图形。

![20200629105137278.png][]

**destination-in**

现有的画布内容保持在新图形和现有画布内容重叠的位置。其他的都是透明的。

![20200629105251134.png][]

**destination-out**

现有内容保持在新图形不重叠的地方。

![20200629105329418.png][]

**destination-atop**

现有的画布只保留与新图形重叠的部分，新的图形是在画布内容后面绘制的。

![20200629105355916.png][]

**lighter**

两个重叠图形的颜色是通过颜色值相加来确定的。

![20200629105419300.png][]

**copy**

只显示新图形。

![20200629105436197.png][]

**xor**

图像中，那些重叠和正常绘制之外的其他地方是透明的。

![20200629105509297.png][]

**multiply**

将顶层像素与底层相应像素相乘，结果是一幅更黑暗的图片。

![20200629105531664.png][]

**screen**

像素被倒转，相乘，再倒转，结果是一幅更明亮的图片。

![20200629105554798.png][]

**overlay**

multiply和screen的结合，原本暗的地方更暗，原本亮的地方更亮。

![20200629105616885.png][]

**darken**

保留两个图层中最暗的像素。

![20200629105638335.png][]

**lighten**

保留两个图层中最亮的像素。

![2020062910565620.png][]

**color-dodge**

将底层除以顶层的反置。

![20200629105714426.png][]

**color-burn**

将反置的底层除以顶层，然后将结果反过来。

![20200629105734455.png][]

**hard-light**

屏幕相乘（A combination of multiply and screen）类似于叠加，但上下图层互换了。

![20200629105814309.png][]

**soft-light**

用顶层减去底层或者相反来得到一个正值。

![20200629105841942.png][]

**difference**

一个柔和版本的强光（hard-light）。纯黑或纯白不会导致纯黑或纯白。

![20200629105858396.png][]

**exclusion**

和difference相似，但对比度较低。

![20200629105914912.png][]

**hue**

保留了底层的亮度（luma）和色度（chroma），同时采用了顶层的色调（hue）。

![20200629105936359.png][]

**saturation**

保留底层的亮度（luma）和色调（hue），同时采用顶层的色度（chroma）。

![20200629105953796.png][]

**color**

保留了底层的亮度（luma），同时采用了顶层的色调(hue)和色度(chroma)。

![20200629110014878.png][]

**luminosity**

保持底层的色调（hue）和色度（chroma），同时采用顶层的亮度（luma）。

![20200629110031966.png][]

### 6. 裁切路径 ###

![20200629110125821.png][]

裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏不需要的部分。如上图所示。红边五角星就是裁切路径，所有在路径以外的部分都不会在 canvas 上绘制出来。

与`globalCompositeOperation` 属性作一比较，它可以实现与 `source-in` 和 `source-atop`差不多的效果。最重要的区别是裁切路径不会在 canvas 上绘制东西，而且它永远不受新图形的影响。这些特性使得它在特定区域里绘制图形时相当好用。

`clip()`方法

将当前正在构建的路径转换为当前的裁剪路径。

看案例

用了一个圆形的裁切路径来限制随机星星的绘制区域。

首先，画了一个与 canvas 一样大小的黑色方形作为背景，然后移动原点至中心点。然后用 `clip` 方法创建一个弧形的裁切路径。裁切路径也属于 canvas 状态的一部分，可以被保存起来。如果我们在创建新裁切路径时想保留原来的裁切路径，我们需要做的就是保存一下 canvas 的状态。

裁切路径创建之后所有出现在它里面的东西才会画出来。在画线性渐变时我们就会注意到这点。然后会绘制出50 颗随机位置分布（经过缩放）的星星，当然也只有在裁切路径里面的星星才会绘制出来。

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1][]

### 7.动画基本步骤 ###

你可以通过以下的步骤来画出一帧:

1.  **清空 canvas**  
    除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有。最简单的做法就是用 `clearRect` 方法。
2.  **保存 canvas 状态**  
    如果你要改变一些会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下。
3.  **绘制动画图形（animated shapes）**  
    这一步才是重绘动画帧。(重绘是相当费时的，而且性能很依赖于电脑的速度。)
4.  **恢复 canvas 状态**  
    如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧。

为了实现动画，我们需要一些可以定时执行重绘的方法。有两种方法可以实现这样的动画操控。首先可以通过 `setInterval` 和 `setTimeout` 方法来控制在设定的时间点上执行重绘。

requestAnimationFrame（draw）

告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。

如果你并不需要与用户互动，你可以使用setInterval()方法，它就可以定期执行指定代码。如果我们需要做一个游戏，我们可以使用键盘或者鼠标事件配合上setTimeout()方法来实现。通过设置事件监听，我们可以捕捉用户的交互，并执行相应的动作。

简答的案例

function draw9() {
      var ctx = document.getElementById('canvas').getContext('2d');       
      ctx.globalCompositeOperation = 'destination-over';
      ctx.clearRect(0,0,500,500); // clear canvas
      ctx.fillStyle = 'green';
      ctx.strokeStyle = 'blueviolet';
      ctx.save();
      ctx.translate(180,180);
      ctx.beginPath();
      ctx.arc(0,0,150,0,Math.PI*2,false);
      ctx.stroke();
      var time = new Date();
      ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() )
      ctx.beginPath();
      ctx.arc(0,150,20,0,Math.PI*2,false);
      ctx.fill();
      ctx.closePath();
      ctx.restore();
      window.requestAnimationFrame(draw9)
    }
    window.requestAnimationFrame(draw9);

效果就是一个小圆绕着大圆旋转

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 2][]

案例2模拟太阳系

var sun = new Image();
    var moon = new Image();
    var earth = new Image();
    function init(){
      sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
      moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
      earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
      window.requestAnimationFrame(draw);
    }
    
    function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
    
      ctx.globalCompositeOperation = 'destination-over';
      ctx.clearRect(0,0,300,300); // clear canvas
    
      ctx.fillStyle = 'rgba(0,0,0,0.4)';
      ctx.strokeStyle = 'rgba(0,153,255,0.4)';
      ctx.save();
      ctx.translate(150,150);
    
      // Earth
      var time = new Date();
      ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
      ctx.translate(105,0);
      ctx.fillRect(0,-12,50,24); // Shadow
      ctx.drawImage(earth,-12,-12);
    
      // Moon
      ctx.save();
      ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
      ctx.translate(0,28.5);
      ctx.drawImage(moon,-3.5,-3.5);
      ctx.restore();
    
      ctx.restore();
      
      ctx.beginPath();
      ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
      ctx.stroke();
     
      ctx.drawImage(sun,0,0,300,300);
    
      window.requestAnimationFrame(draw);
    }
    
    init();

![20200629115419781.png][]

案例3动画时钟

![2020062911552323.png][]

关于动画要了解的可不止这些，包括速率，加速度，边界，拖尾效果，鼠标控制等等

举个栗子

用你的鼠标移动小球，点击可以释放。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 3][]

### 8. canvas相关的动画js框架 ###

Three.js

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zOTczODYyLTJjZGE0ZmIzZGEyYWEyZGIuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNTUxL2Zvcm1hdC93ZWJw][]

这个流行的库提供了非常多的3D显示功能，以一种直观的方式使用 WebGL。这个库提供了<canvas>、 <svg>、CSS3D 和 WebGL渲染器，让我们在设备和浏览器之间创建丰富的交互体验。该库于2010年4月首次推出

pixi.js

虽然只是个渲染框架而非游戏引擎，但是pixi.js挺适合写游戏的，你可以看下netent上的博彩游戏，上万款游戏全是pixi.js写的。pixi.js刚接触的时候觉得很简陋，文档都是英文的，有时候还需要看源码(源码写的非常的优秀)才能理解怎么回事，这对很多人是个很高的门槛，但是如果你能克服这些，会发现用着真的很舒服。

周边插件也挺丰富的，动画(spine/dragonbones)，粒子系统，物理引擎等等，想用什么就引入什么，和unix设计哲学一样，每个工具只干一件事并把这件事做好，你可以组合很多工具完成复杂的功能。

[Html5_Canvas]: https://blog.csdn.net/weixin_41229588/article/details/106941419
[20200629093334275.png]: https://img-blog.csdnimg.cn/20200629093334275.png
[20200629093712742.png]: https://img-blog.csdnimg.cn/20200629093712742.png
[20200629094114993.png]: https://img-blog.csdnimg.cn/20200629094114993.png
[20200629094416857.png]: https://img-blog.csdnimg.cn/20200629094416857.png
[20200629094843860.png]: https://img-blog.csdnimg.cn/20200629094843860.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200629103149460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[20200629103755880.png]: https://img-blog.csdnimg.cn/20200629103755880.png
[20200629104830653.png]: https://img-blog.csdnimg.cn/20200629104830653.png
[20200629104916779.png]: https://img-blog.csdnimg.cn/20200629104916779.png
[20200629104946133.png]: https://img-blog.csdnimg.cn/20200629104946133.png
[20200629105104962.png]: https://img-blog.csdnimg.cn/20200629105104962.png
[20200629105137278.png]: https://img-blog.csdnimg.cn/20200629105137278.png
[20200629105251134.png]: https://img-blog.csdnimg.cn/20200629105251134.png
[20200629105329418.png]: https://img-blog.csdnimg.cn/20200629105329418.png
[20200629105355916.png]: https://img-blog.csdnimg.cn/20200629105355916.png
[20200629105419300.png]: https://img-blog.csdnimg.cn/20200629105419300.png
[20200629105436197.png]: https://img-blog.csdnimg.cn/20200629105436197.png
[20200629105509297.png]: https://img-blog.csdnimg.cn/20200629105509297.png
[20200629105531664.png]: https://img-blog.csdnimg.cn/20200629105531664.png
[20200629105554798.png]: https://img-blog.csdnimg.cn/20200629105554798.png
[20200629105616885.png]: https://img-blog.csdnimg.cn/20200629105616885.png
[20200629105638335.png]: https://img-blog.csdnimg.cn/20200629105638335.png
[2020062910565620.png]: https://img-blog.csdnimg.cn/2020062910565620.png
[20200629105714426.png]: https://img-blog.csdnimg.cn/20200629105714426.png
[20200629105734455.png]: https://img-blog.csdnimg.cn/20200629105734455.png
[20200629105814309.png]: https://img-blog.csdnimg.cn/20200629105814309.png
[20200629105841942.png]: https://img-blog.csdnimg.cn/20200629105841942.png
[20200629105858396.png]: https://img-blog.csdnimg.cn/20200629105858396.png
[20200629105914912.png]: https://img-blog.csdnimg.cn/20200629105914912.png
[20200629105936359.png]: https://img-blog.csdnimg.cn/20200629105936359.png
[20200629105953796.png]: https://img-blog.csdnimg.cn/20200629105953796.png
[20200629110014878.png]: https://img-blog.csdnimg.cn/20200629110014878.png
[20200629110031966.png]: https://img-blog.csdnimg.cn/20200629110031966.png
[20200629110125821.png]: https://img-blog.csdnimg.cn/20200629110125821.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200629110539780.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200629115326527.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[20200629115419781.png]: https://img-blog.csdnimg.cn/20200629115419781.png
[2020062911552323.png]: https://img-blog.csdnimg.cn/2020062911552323.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200629134608873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zOTczODYyLTJjZGE0ZmIzZGEyYWEyZGIuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNTUxL2Zvcm1hdC93ZWJw]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8zOTczODYyLTJjZGE0ZmIzZGEyYWEyZGIuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvNTUxL2Zvcm1hdC93ZWJw