H5画布 canvas 入门到精通 _ 第三部分(canvas 库 Konva.js 的使用)_前端小马的进阶之路~_canvas js库

大大的周 02-07 5896

一、Konva 基本概念

二、Konva 的使用

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 的扩展实现了在桌面端和移动端的可交互性。提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能.http://konvajs-doc.bluehymn.com/? ? ? ? 在 Konva 的使用中，整个视图可以看成一个舞台 stage，舞台中可以有多个层次 layer，每一层下面又可以有各种形状或者很多组 group，组下面也可以有分组或各种各样的形状 shape，如下示意图：

二、Konva 的使用 1. 引入 Konva

? ? ? ? 在我们的项目中使用 Konva 前需要先引入 .js 包，可以通过 <script> 标签在线引入，也可以从 CDN 下载至本地后引入；

在线引入：

从 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(); //创建层 layer stage.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 绘制一个矩形：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用konva库制作一个矩形</title> <style></style>  <script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script> </head> <body>  <div id="container"></div> </body> <script> //1.创建舞台 var stage = new Konva.Stage({ container: 'container', width: window.innerWidth, //宽高（全屏） height: window.innerHeight, }) //2.创建层 var layer = new Konva.Layer(); //3.将层添加至舞台 stage.add(layer); //4.创建矩形 var rect = new Konva.Rect({ x: 100, //起始坐标 y: 100, width: 200, //宽高 height: 100, scaleX: 1.3, scaleY: 1.3, draggable: true, fill: 'red' //填充 }) //5.将矩形添加至层 layer.add(rect); //6.将层渲染至舞台 layer.draw(); </script> </html>

效果如下：

三、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.BackEaseOutKonva.Easings.BackEaseInOutKonva.Easings.ElasticEaseIn；橡皮筋Konva.Easings.ElasticEaseOutKonva.Easings.ElasticEaseInOutKonva.Easings.BounceEaseIn；弹跳Konva.Easings.BounceEaseOutKonva.Easings.BounceEaseInOutKonva.Easings.StrongEaseIn；强力Konva.Easings.StrongEaseOutKonva.Easings.StrongEaseInOut 2. 动画 to 方法的使用

? ? ? ? 在实际的开发过程中，如果每次使用动画都先实例化 Konva.tween，在 play() 启动动画，这样是很麻烦的，而且效率不高。而 Konva 也为开发者提供了更为简便的方式，那就是 to，to 其实就是对 tween 的封装。

在使用 to 时我们不必再去实例化 Konva.tween 对象，直接在需要添加动画的对象后面 .to{ } 创建相关属性即可。

如下是使用动画的两种方式对比：

效果如下：

3. 循环播放动画

? ? ? ? 循环播放主要是结合?tween 配合 onFinish 事件中的 reset()重置动画和 play()播放动画，达到循环播放的效果。

如下简单案例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>konva动画</title> <style> body { padding: 0; margin: 0; background-color: bisque; overflow: hidden; } </style>  <script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script> </head> <body>  <div id="container"></div> </body> <script> //创建舞台 var stage = new Konva.Stage({ container: 'container', width: window.innerWidth, //宽高（全屏） height: window.innerHeight, }) //创建层 var layer = new Konva.Layer(); //将层添加至舞台 stage.add(layer); //创建矩形 var rect = new Konva.Rect({ x: 250, y: 250, width: 100, height: 100, fill: 'red' }); layer.add(rect); layer.draw(); //tween为矩形添加动画 var tween = new Konva.Tween({ node: rect, //要进行动画的Konva对象 x: 100, y: 100, rotation: 360, //旋转360度 opactity: .1, easing: Konva.Easings.Linear, //动画效果 duration: 2, //持续时间 yoyo: true, //是否进行循环播放 onFinish: function () { //动画执行结束后执行此方法 this.reset(); //重置动画 this.play(); //播放动画 } }); tween.play(); //启动动画 </script> </html>

效果如下：

四、案例：使用 Konva 绘制进度条

? ? ? ? 具体思路就是：绘制一个外部矩形，一个内部矩形，再为内部矩形添加动画，宽度由 0 变为外部矩形的宽度。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用konva库制作一个进度条</title> <style> body { padding: 0; margin: 0; background-color: bisque; overflow: hidden; } </style>  <script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script> </head> <body>  <div id="container"></div> </body> <script> //创建舞台 var stage = new Konva.Stage({ container: 'container', width: window.innerWidth, //宽高（全屏） height: window.innerHeight, }) //创建层 var layer = new Konva.Layer(); //将层添加至舞台 stage.add(layer); //设置中心点 var centerX = stage.width() / 2; var centerY = stage.height() / 2; var x = 1 / 8 * stage.width(); var y = centerY; var height = 1 / 12 * stage.height(); var maxWidth = 3 / 4 * stage.width() //绘制进度条 //内部矩形 var innerRect = new Konva.Rect({ x: x, y: y, width: 100, height: height, opacity: 0.8, //透明度 fill: '#149985', cornerRadius: height / 2, //圆角 }); //将内部矩形添加至层 layer.add(innerRect); //外部矩形 var outerRect = new Konva.Rect({ x: x, y: y, width: maxWidth, height: height, stroke: 'blue', strokeWidth: 2, cornerRadius: height / 2, }); //将外部矩形添加至层 layer.add(outerRect); //为内部矩形添加动画效果 innerRect.to({ width: maxWidth, //内部矩宽度变为最大宽度 duration: 1.4, //动画持续时间 easing: Konva.Easings.StrongEaseInOut, }) //将层渲染至舞台 layer.draw(); </script> </html>

案例效果：

三篇文章速通 canvas：

???第一部分：canvas介绍，绘制圆形、矩形； ?? 第二部分：绘制文字、图片、坐标系，canva颜色和样式，绘制环境； ???第三部分：canvas库Konva.js的使用。