정보실

웹학교

정보실

javascript Konva.js는 HTML5 Canvas JavaScript 프레임 워크로 데스크탑 및 모바일 애플리케이션에 캔버스 인터랙티브…

본문

Konva는 HTML5 Canvas JavaScript 프레임 워크로 고성능 애니메이션, 전환, 노드 중첩, 계층화, 필터링, 캐싱, 데스크탑 및 모바일 애플리케이션의 이벤트 처리 등을 가능하게 합니다.


응용 프로그램이 수천 개의 모양을 사용하더라도 스테이지에 물건을 그리고 이벤트 리스너를 추가하고 이동하고 크기를 조정하고 다른 모양과 독립적으로 회전하여 고성능 애니메이션을 지원할 수 있습니다. 


https://github.com/konvajs/konva 

http://konvajs.org/


<script src="https://unpkg.com/konva@3.1.0/konva.js"></script>
<div id="container"></div>
<script>
    var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight
    });

    // add canvas element
    var layer = new Konva.Layer();
    stage.add(layer);

    // create shape
    var box = new Konva.Rect({
        x: 50,
        y: 50,
        width: 100,
        height: 50,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
    });
    layer.add(box);

    layer.draw();

    // add cursor styling
    box.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
    });
    box.on('mouseout', function() {
        document.body.style.cursor = 'default';
    });
</script>







  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 16회 ]  작성일19-09-08 10:39

웹학교