H5画布 canvas 入门到精通 _ 第三部分(canvas 库 Konva.js 的使用)

目录

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

二、Konva 的使用

1. 引入 Konva

在我们的项目中使用 Konva 前需要先引入 .js 包&