前端开发工程师知识体系|H5画布 canvas 入门到精通 _ 第三部分(canvas 库 Konva.js 的使用) canvas|css|javascript|html5|前端

目录
一、Konva 基本概念
二、Konva 的使用
【前端开发工程师知识体系|H5画布 canvas 入门到精通 _ 第三部分(canvas 库 Konva.js 的使用)】1. 引入 Konva
2. Konva 基本绘制步骤
三、Konva 动画
1. tween 对象
2. 动画 to 方法的使用
3. 循环播放动画
四、案例：使用 Konva 绘制进度条
一、Konva 基本概念 Konva.js，全称适用于桌面/移动端应用的 HTML5 2d canvas 库，是一个HTML5 Canvas JavaScript 框架，它提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能。你可以使用 Konva 在舞台上绘制图形，给图形添加事件，移动、缩放和旋转图形并且支持高性能的动画即使包含数千个图形。Konva 具有以下特点：

轻量，使用方便，可适用于 PC 端和移动端；
支持丰富的事件处理操作；
支持类似于 jQuery 的操作方式；
开源，可以随意更改；
性能好。

Konva 中文文档中文APIKonva Konvajs 中文文档, Konva 是一个HTML5 Canvas JavaScript 框架，它通过对 2d context 的扩展实现了在桌面端和移动端的可交互性。提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能.

前端开发工程师知识体系|H5画布 canvas 入门到精通 _ 第三部分(canvas 库 Konva.js 的使用)

文章图片
http://konvajs-doc.bluehymn.com/在 Konva 的使用中，整个视图可以看成一个舞台 stage，舞台中可以有多个层次 layer，每一层下面又可以有各种形状或者很多组 group，组下面也可以有分组或各种各样的形状 shape，如下示意图：

文章图片

二、Konva 的使用 1. 引入 Konva
在我们的项目中使用 Konva 前需要先引入 .js 包，可以通过
从 CDN 下载官网 Konva.js 包：

Konva.js 完整版
Konva.js 压缩版

2. Konva 基本绘制步骤
（1）创建一个具有 id 名的 div，用于放置舞台；

（2）创建舞台 stage

var stage = new Konva.Stage({ container: 'container', //指定放置舞台的容器 width: window.innerWidth, //设置宽高 height: window.innerHeight, })

（3）创建层 layer 并将层添加至舞台；

var layer = new Konva.Layer(); //创建层 layerstage.add(layer); //将层添加至舞台

（4）创建要绘制的图形(此处以矩形为例)；

var rect = new Konva.Rect({ //创建矩形 x: 100, y: 100, opactity: 0.5, draggable: true, fill: 'red' //其余相关属性... })

（5）将创建的形状添加至层并将层渲染到舞台中；

layer.add(rect); //将图形添加至层layer.draw(); //将层渲染到舞台

接下来我们结合以上步骤使用 Konva 绘制一个矩形：

使用konva库制作一个矩形

效果如下：

文章图片

三、Konva 动画 1. tween 对象
使用动画时必须先实例化 Konva.tween 对象创建补间动画，然后执行 play() 运行动画；tween 是控制 Konva 对象进行动画的核心对象，它可以控制所有数字类型的属性进行动画处理，比如：x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX 等。
如下是一个基本的 tween 创建动画的例子：

var tween = new Konva.Tween({ node: rect, //要使用动画的Konva对象 x: 300, y:300, rotation: 360, //旋转 duration: 1, //持续时间 easing: Konva.Easings.EaseIn, //动画效果 yoyo: true, //是否进行循环播放 ...... onFinish: function() { //动画执行结束后，执行此方法} }); tween.play(); //启动动画

除用 play() 方法启动动画之外，tween 还有以下参数可供使用：

tween.play()；播放动画

tween.pause()；暂停动画

tween.reverse()；动画逆播放

tween.reset()；重置动画

tween.finish()；立即结束动画

动画的效果也有多种：

Konva.Easings.Linear；线性

Konva.Easings.EaseIn；缓动，先慢后快

Konva.Easings.EaseOut；先快后慢

Konva.Easings.EaseInOut；两头慢，中间快

Konva.Easings.BackEaseIn；往回一点，然后往前冲

Konva.Easings.BackEaseOut

Konva.Easings.BackEaseInOut

Konva.Easings.ElasticEaseIn；橡皮筋

Konva.Easings.ElasticEaseOut

Konva.Easings.ElasticEaseInOut

Konva.Easings.BounceEaseIn；弹跳

Konva.Easings.BounceEaseOut

Konva.Easings.BounceEaseInOut

Konva.Easings.StrongEaseIn；强力

Konva.Easings.StrongEaseOut

Konva.Easings.StrongEaseInOut