###### tags: `konva`, `canvas`, `javascript`
# 【自學筆記】konva入門 - 形狀

`Konva`是個`HTML5 Canvas JavaScript`的框架，透過`2d context`的擴展實現各種圖形功能，正好可以實現最近工作需求，就來研究看看囉

---

### Konva提供的形狀

Konva提供了這些封裝好的形狀使用：
`Rect`, `Circle`, `Ellipse`, `Line`, `Polygon`, `Spline`, `Blob`, `Image`, `Text`, `TextPath`, `Star`, `Label`, `SVG Path`, `RegularPolygon`

除此之外也可以自己設計形狀

var triangle = new Konva.Shape({
    sceneFunc: function(context) {
        context.beginPath();
        context.moveTo(20, 50);
        context.lineTo(220, 80);
        context.quadraticCurveTo(150, 100, 260, 170);
        context.closePath();

        // special Konva.js method
        context.fillStrokeShape(this);
      },
      fill: '#00D2FF',
      stroke: 'black',
      strokeWidth: 4
});


### Konva的Style

每個形狀都有些Style屬性可以設置
* `Fill`, `Solid color`, `gradients` or `images`
* `Stroke` (`color`, `width`)
* `Shadow` (`color`, `offset`, `opacity`, `blur`)
* `Opacity`

例如這樣

var pentagon = new Konva.RegularPolygon({
    x: stage.width() / 2,
    y: stage.height() / 2,
    sides: 5,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    shadowOffsetX : 20,
    shadowOffsetY : 25,
    shadowBlur : 40,
    opacity : 0.5
});

---

*參考資料: https://konvajs.org/docs/*

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*