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 的擴展實現了在桌面端和移動端的可交互性。提供了高性能的動畫，補間，節點嵌套，布局，濾鏡，緩存，事件綁定（桌面/移動端）等等功能.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(); //創建層 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 繪制一個矩形：

效果如下：

三、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

2. 動畫 to 方法的使用

在實際的開發過程中，如果每次使用動畫都先實例化 Konva.tween，在 play() 啟動動畫，這樣是很麻煩的，而且效率不高。而 Konva 也為開發者提供了更為簡便的方式，那就是 to，to 其實就是對 tween 的封裝。

在使用 to 時我們不必再去實例化 Konva.tween 對象，直接在需要添加動畫的對象后面 .to{ } 創建相關屬性即可。

如下是使用動畫的兩種方式對比：

效果如下：

3. 循環播放動畫

循環播放主要是結合?tween 配合 onFinish 事件中的 reset()重置動畫 和 play()播放動畫，達到循環播放的效果。

如下簡單案例：

效果如下：

四、案例：使用 Konva 繪制進度條

具體思路就是：繪制一個外部矩形，一個內部矩形，再為內部矩形添加動畫，寬度由 0 變為外部矩形的寬度。

案例效果：

三篇文章速通 canvas：

???第一部分：canvas介紹，繪制圓形、矩形；

?? 第二部分：繪制文字、圖片、坐標系，canva顏色和樣式，繪制環境；

???第三部分：canvas庫Konva.js的使用。

Canvas JavaScript

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。