konva 是一個(gè)對(duì) canvas API 做了封裝增強(qiáng)的 JavaScript 庫(kù)。
HTML 原生的 canva 提供的 API 比較底層，用法上像是操縱一支畫筆進(jìn)行各種操作熬甫，畫完就結(jié)束了。
canvas 本身不維護(hù)圖形樹蔓罚，你也無法操作修改已被繪制的圖形椿肩。
而 konva 能夠像我們操作 DOM 樹一樣去繪制和維護(hù)元素瞻颂，它會(huì)額外維護(hù)圖形構(gòu)成的樹，并能在繪制后郑象，對(duì)特定圖形進(jìn)行樣式的修改贡这。
你還可以在上面添加事件，比如鼠標(biāo)滑入某圖形時(shí)扣唱，圖形變大一點(diǎn)藕坯。此外還支持方便的變形、動(dòng)畫噪沙、拖拽等高級(jí)能力炼彪。
安裝
和大多數(shù)的 JS 庫(kù)一樣，我們可以用包管理器安裝：
npm?install?konva
#?或者
yarn?add?konva或者用 script 標(biāo)簽引入一個(gè)全局的對(duì)象
<script?src="./konva.min.js"></script>下面我們就簡(jiǎn)單看一個(gè)例子正歼。
繪制一個(gè)矩形
首先我們用 Konva.Stage 構(gòu)建一個(gè)舞臺(tái)（stage）辐马。
const?stage?=?new?Konva.Stage({
??container:?'#container',
??width:?300,
??height:?300
});執(zhí)行后，konva 會(huì)在 div#container 下創(chuàng)建一個(gè) div局义，然后在這個(gè) div 下再創(chuàng)建寬高各為 300px 的 canvas 元素喜爷。
前提是 stage 里面有元素存在，否則 canvas 不會(huì)被創(chuàng)建萄唇。
舞臺(tái)有了檩帐，我們?cè)撛谏厦嫣砑訄D形了，但直接在 stage 下添加圖形是不允許的另萤。我們需要先創(chuàng)建一個(gè)圖層（Layer）湃密。
const?layer?=?new?Konva.Layer();圖層就像是重疊在一起的多張透明的紙，可以很方便地管理多組圖形四敞，比如隱藏某個(gè)圖層泛源，等比放大某個(gè)圖層。
創(chuàng)建完圖層后忿危，我們就可以在上面添加圖形了达箍。這里我們創(chuàng)建一個(gè)矩形。
const?rect?=?new?Konva.Rect({
??x:?20,
??y:?20,
??width:?200,
??height:?200,
??fill:?'orange'
});我們指定了矩形的左上角坐標(biāo)铺厨、寬高以及填充色缎玫。
最后我們將這些對(duì)象組合起來，形成類似 DOM 結(jié)構(gòu)的樹：
layer.add(rect);
stage.add(layer);于是矩形被繪制出來了努释。
Demo 地址：
https://codepen.io/F-star/pen/oNErwmW?editors=0010
結(jié)尾
konva 能夠讓我們像寫 DOM 對(duì)象或者是 SVG 對(duì)象那樣碘梢，去控制 canvas 里的圖形，讓基于 canvas 做一些復(fù)雜的項(xiàng)目變得簡(jiǎn)單伐蒂。
今天我們簡(jiǎn)單了解了一下 konva 是什么煞躬，并寫了一個(gè) demo 讓大家對(duì) konva 的用法有一個(gè)印象。
這是系列文章，后續(xù)會(huì)繼續(xù)講解 konva 的用法恩沛，我是前端西瓜哥在扰，歡迎關(guān)注我。
