투케이2K

261. (JavaScript) [Fabric 라이브러리] - Fabric 사용해 캔버스 원형 (Circle) 그리기 수행 본문

JavaScript

261. (JavaScript) [Fabric 라이브러리] - Fabric 사용해 캔버스 원형 (Circle) 그리기 수행

투케이2K 2023. 5. 1. 17:34

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

​

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;    
        }

    </style>




    <!-- [CDN 설정 실시] -->
    <script src="https://unpkg.com/fabric@5.3.0/dist/fabric.min.js"></script>





    <!-- [내부 자바스크립트 J쿼리 이벤트 지정] -->
    <script>
        

        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. Fabric.js : Javascript HTML5 캔버스 라이브러리 입니다 
        -----------------------------------------
        2. window.onload : 웹페이지 로드 완료 상태를 확인합니다
        -----------------------------------------
        3. Fabric.js 객체 종류 : 
        fabric.Circle
        fabric.Ellipse
        fabric.Line
        fabric.Polygon
        fabric.Polyline
        fabric.Rect
        fabric.Triangle
        -----------------------------------------
        4. 참고 사이트 : 

        http://fabricjs.com/
        -----------------------------------------
        */






        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log(""); 


            // [테스트 함수 호출]
            testMain();
        };





        // [자바스크립트 테스트 코드]
        function testMain(){
            console.log("");
            console.log("=========================================");
            console.log("[testMain] : [start]");
            console.log("=========================================");
            console.log("");


            // [캔버스 지정]
            var canvas = new fabric.Canvas('myCanvas');


            // [사각형 그리기]
            var rect = new fabric.Circle({

              left: 100, // [margin - left]
              top: 100, // [margin - top]
              fill: 'blue', // [채우기 색상]
              width: 20, // [너비]
              height: 20, // [높이]

              radius: 20, // [radius]

              opacity: 0.7 // [투명도]

            });


            // [캔버스에 추가 실시]
            canvas.add(rect);

        };



    </script>


</head>


<body>


    <!-- [캔버스 컴포넌트 생성] -->
    <canvas id="myCanvas" width="300px" height="300px" style="border: 1px solid #993300;"></canvas>


</body>

</html>
 

[결과 출력]

​

 

 

반응형
저작자표시

'JavaScript' 카테고리의 다른 글

263. (JavaScript) [string to byte] TextEncoder 사용해 string 문자열 데이터를 byte 배열로 변환 수행  (0) 2023.05.08
262. (JavaScript) [Fabric 라이브러리] - Fabric 사용해 캔버스 삼각형 (Triangle) 그리기 수행  (0) 2023.05.01
260. (JavaScript) [Fabric 라이브러리] - Fabric 사용해 캔버스 angle 회전 각도 설정 수행  (0) 2023.05.01
259. (JavaScript) [Fabric 라이브러리] - Fabric 사용해 캔버스 사각형 (rect) 그리기  (0) 2023.05.01
258. (JavaScript) [html2canvas 라이브러리] - html2canvas 사용해 브라우저 화면을 캡쳐 (capture) 수행 실시  (0) 2023.03.12
'JavaScript' Related Articles more
Comments