開源項目精選：基於H5 Canvas的交互框架——Konva

簡介：

Knova.js 是一個基於HTML5 Canvas 的JavaScript 框架，可以實現高性能的動畫，轉換，節點嵌套，分層，過濾，緩存，時間處理等等，並且具有良好的響應式布局，可以同時支持電腦桌面和移動應用。

在使用Knova時，可以在Knova.Stage上開始繪製，為它們添加事件監聽器，移動它們，縮放它們，即使您的應用程序使用了數千種形狀，並將它們從其他形狀中獨立出來以支持高性能的動畫。

該庫最初是作為ericdrowell / KineticJS的GitHub分支開始的。

實現方式

所有工作都從Konva.Stage開始，每個stage可以包含多個圖層，而每個圖層則包含兩個canvas渲染器，其中一個是我們所看見的，另一個隱藏，用來提高實現事件監聽的效率。

使用示例

效果演示

GIF

載入和安裝

Konva支持UMD載入。因此，您可以使用所有可能的變體將框架載入到您的項目中：

1. 通過標籤來載入Konva：

2. 通過AMD載入：

3. 通過npm：

導入代碼

4. 如果您使用的是webpack或browserfy，則可以使用此方法僅載入所需的Konva零件：

了解更多歡迎進入官方演示站：

https://konvajs.github.io/

github

本文由 Superscalar@開源工場 以 CC-BY-SA 4.0 協議創作發布，轉載請註明開源工場作品及來源網址。

開源工場是一個通過開源協作形式來創造生產力和寓技術於樂趣的非盈利開源社區平台。我們每日更新豐富的前沿知識，更有高質量的開源日報、開源周報等待各位閱覽。

另外，歡迎關注我們的

新浪微博：開源工場 Twitter：開源工場 Facebook：開源工場

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！