prestomusic

PlayPauseButton 컴포넌트

svg와 canvas

https://www.sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job/

프로그래밍 언어를 작성해서 그래픽을 구현할 수 있는태그. 다각형과 패스 등 다양한 모양을 좌표로 구현하기 때문에 섬세한 그래픽 표현이 가능하다.

svg

xml 문법
vector 기반: 화질이 깨지지 않는다
DOM 의존적: DOM구조를 가지기 때문에 메모리나 퍼포먼스 측면에서 좋지 않다.(js를 통해 DOM에 접근하기엔 용이)

<svg version="1.1"
    baseProfile="full"
    width="100%" height="100%" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <rect></rect>
    <polygon></polygon>
</svg>

canvas
- js 문법
- Bitmap 기반: 확장 시 화질이 깨진다
- DOM에 의존적이지 않음: 픽셀을 다루기 때문에 별다른 구조를 갖지 않는다. 따라서 퍼포먼스가 좋다(퍼포먼스를 많이 잡아먹는 애니메이션, 3d에 이용)
```
<canvas id="canvas"></canvas>
```
```
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
  
ctx.fillRect('green');
ctx.strokeRect(50, 50, 50, 50);
```

js로 css 속성 조작하기: attr()와 var()

attr(): 엘리먼트 속성값을 문자열로 가져온다. 따라서 content와 같은 속성에나 적합

var(): 선언된 변수를 문자열이 아닌 형태로 가져온다. inline 스타일도 가져올 수 있다

<div style="--inline-color: red"></div>

div {
    --color: blue;
    background: var(--color);
    color: var(--inline-color);
}