전 시간 캔버스 사용의 문제중 하나...
: 일일히 한땀 한땀... 그리는 것이 비효율적이다.........
그래서 사용하는 것 => Fabric.js 라이브러리 !
사용법은?
🔼 위 링크 접속 후 링크 복사한 뒤
스크립트 형태로 넣어주면 된다.
그러면 fabricjs 라이브러리를 사용할 수있다.
fabric.js 장점
- 도형들이 벡터화 되어있어서 깨지지않음
- 마구잡이로 크기나 위치 조절 가능 (easy~)
사용 예시
<script>
var canvas; ✓
function draw(){
canvas = new fabric.Canvas('c'); ✓
var circle = new fabric.Circle({radius: 20, fill: 'green', left: 100, top: 100 });
var triangle = new fabric.Triangle({width: 20, height: 30, fill: 'blue', left: 50, top: 50 });
canvas.add(circle, triangle);
}
</script>
</head>
<body onload="draw();">
<canvas id="c" width=500 height=500
style="border:2px solid black"></canvas> ✓
</body>라이브러리에서 복사떠옴.
기본적인 선언은 추가로 해줘야한다.
greedy college ssu.tudent 👩🎓