###### tags: `konva`, `canvas`, `javascript` # 【自學筆記】konva入門 - Cache `Konva`是個`HTML5 Canvas JavaScript`的框架，透過`2d context`的擴展實現各種圖形功能，正好可以實現最近工作需求，就來研究看看囉 --- [範例程式](https://codepen.io/niodoshaba-the-flexboxer/pen/Baraypr) ### Konva的Cache 當專案中的Konva的圖形複雜起來了，整體的效率也會被影響 Konva提供了`cache`的方式，通過使用`cache()`將節點轉換為圖像，大幅改善效能問題 範例為用`cache`繪製星星，而不是個別單獨繪製 ```htmlembedded= <body> <div id="container"></div> </body> ``` ```javascript= var stage = new Konva.Stage({ container: 'container', width: window.innerWidth, height: window.innerHeight, }); var layer = new Konva.Layer(); var star = new Konva.Star({ innerRadius: 20, outerRadius: 50, fill: 'red', x: 60, y: 60, draggable: true, }); layer.add(star); stage.add(layer); // 把star存到cache star.cache(); var clone; for (var n = 0; n < 10; n++) { // 把star clone下來，並修改x,y軸，然後用迴圈重複渲染 clone = star.clone({ x: Math.random() * stage.width(), y: Math.random() * stage.height(), }); clone.cache(); layer.add(clone); } ``` >Cache可以用於所有層級，包含`Stage`、`Layer`、`Shape` :::danger cache()要求設定與執行的代碼，必須要在同個網域的伺服器上 ::: --- *參考資料: https://konvajs.org/docs/* *新手工程師的筆記，純粹記錄學了些啥東西 如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*