댓글 검색 목록

[javascript] Scrawl-canvas Library - 반응형 통합 대화형 HTML5 캔버스 요소

페이지 정보

작성자 운영자 작성일 21-02-13 22:27 조회 749 댓글 0

반응형 통합 대화형 HTML5 캔버스 요소. Scrawl-canvas는 HTML5 캔버스 요소를 좀 더 쉽고 재미있게 사용할 수 있도록 설계된 JavaScript 라이브러리입니다!

https://github.com/KaliedaRik/Scrawl-canvas

<!-- Hello world -->
<!DOCTYPE html>
<html>
<head>
    <title>Scrawl-canvas Hello World</title>
</head>
<body>
    
    <canvas id="mycanvas"></canvas>

    <!-- The library is entirely modular and needs to be imported into a module script -->
    <script type="module">

        import scrawl from './relative-or-absolute/path/to/scrawl-canvas/min/scrawl.js';

        // Get a handle to the canvas element
        let canvas = scrawl.library.canvas.mycanvas;

        // Setup the scene to be displayed in the canvas
        scrawl.makePhrase({

            name: 'hello',
            text: 'Hello, World!',

            width: '100%',

            startX: 20,
            startY: 20,

            font: 'bold 40px Garamond, serif',
        });

        // Render the canvas scene once
        canvas.render()
        .catch(err => {});

    </script>

</body>
</html>