오봉이와 함께하는 개발 블로그

jQuery - canvas 태그 본문

FE/jQuery

jQuery - canvas 태그

오봉봉이 2021. 12. 15. 17:03
728x90

<canvas>태그

  • 도형이나 이미지 출력
<canvas>태그 예제 - canvas.html
  <script src="jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
           $(document).ready(function() {
                var canvas = document.getElementById('rectCanvas');
                var context = canvas.getContext('2d');

                $('#drawBtn').on('click', () => {
                    // 색상 지정
                    context.fillStyle = 'green';
                    // 테두리만 있는 사각형
                    context.strokeRect(10, 10, 250, 250); // x, y, width, height
                    // 색이 채워진 사각형 그리기
                    context.fillRect(280, 10, 250, 250);
                    // 색상 변경
                    context.fillStyle = 'pink';
                    context.fillRect(530, 10, 250, 250);

                    // 특정 영역 지우기
                    context.clearRect(300, 50, 100, 100);
                })
                $('#clearCanvas').on('click', () => {
                    context.clearRect(0, 0, 800, 800);
                })
                $('#drawImage').on('click', () => {
                    var image = new Image();
                    image.src = "image/apple.png";
                    image.onload = function() {
                        context.drawImage(image, 0, 0, image.width, image.height);
                    }
                })
           });
        </script>
</head>
<body>
    <button id="drawBtn">사각형 그리기</button>
    <button id="clearCanvas">캔버스 지우기</button>
    <button id="drawImage">이미지 출력</button><br><br>
    <canvas id="rectCanvas" width="800" height="600"></canvas>
</body>
<canvas>태그 문제 - pose.html
 <script src="jquery-3.6.0.min.js"></script>
        <script src="pose.js"></script>
        <script type="text/javascript">
           $(document).ready(function() {

           });
        </script>
</head>
<body>
    <h2>포즈 인식</h2>
    <button id="showBtn">결과 확인</button><br><br>
    <h3>포즈 인식 결과를 이미지에 좌표로 표시</h3>
    <canvas id="poseCanvas" width="600" height="600"></canvas>
    <div id="resultDiv"></div>
</body>
// $(document).ready(function(){ 축약형
$(function(){
    // [결과 확인] 버튼 클릭하면 서버에서 좌표 받아서
    // 이미지 출력하는 drawCanvas() 함수 호출 : 좌표, 이미지  src 전달
    $('#showBtn').on('click', function() {
        // 서버에서 응답 결과로 좌표 값 받았다고 가정
        var result = {"points": [{"x":0.42, "y":0.20}, {"x":0.49, "y":0.22}, {"x":0.42, "y":0.27}, {"x":0.30, "y":0.33}, 
                                                {"x":0.32, "y":0.22}, {"x":0.52, "y":0.25}, {"x":0.65, "y":0.31}, {"x":0.72, "y":0.41}, 
                                             {"x":0.61, "y":0.51}, {"x":0.65, "y":0.69}, {"x":0.81, "y":0.82}, {"x":0.51, "y":0.51}, 
                                             {"x":0.29, "y":0.51}, {"x":0.35, "y":0.72}, {"x":0.39, "y":0.18}, {"x":0.49, "y":0.18}]};
        var src = "image/run.jpg";
        drawCanvas(result.points, src);
    });
    function drawCanvas(result, src){
        // 캔버스 생성
        var canvas = document.getElementById('poseCanvas');
        var context = canvas.getContext("2d");
        // 이미지 생성
        var poseImage = new Image();
        poseImage.src = src;
        poseImage.width = canvas.width;
        poseImage.height = canvas.height;

        poseImage.onload = function() {
            context.drawImage(poseImage, 0, 0, poseImage.width, poseImage.height);
            // 색상 배열 지정
            var colors = ["red", "blue", "yellow", "yellow",
                                "yellow","green", "green","green", 
                                "skyblue","skyblue","skyblue","white",
                                "white","white","brown","gold"];
            // 포지션 배열 지정
            var position = ["코", "목", "오른쪽 어깨", "오른쪽 팔굼치", 
                                    "오른쪽 손목", "왼쪽 어깨", "왼쪽 팔굼치", "왼쪽 손목", 
                                    "오른쪽 엉덩이", "오른쪽 무릎", "오른쪽 발목", "왼쪽 엉덩이", 
                                    "왼쪽 무릎", "왼쪽 발목", "왼쪽 눈", "왼쪽 귀"];
            var values = "";
            // 각 좌표를 이미지에 표시
            //$.each(배열, 콜백함수)
            $.each(result, function(i){
                if(this.x !=0 || this.y != 0){
                    context.strokeStyle = colors[i];
                    context.strokeRect(this.x*poseImage.width, this.y*poseImage.height, 2, 2);
                    var text = this.x.toFixed(2) + "," + this.y.toFixed(2);
                    context.font = '10px';
                    context.strokeText(text, this.x*poseImage.width, this.y*poseImage.height);
                }
                values += position[i] + " (" + this.x + ", " + this.y + ") <br>";
            });
            // resultDiv <div>에 포지션(좌표) 출력
            $('#resultDiv').html(values);
        };    
    }//  drawCanvas() 끝
});
728x90
저작자표시

'FE > jQuery' 카테고리의 다른 글

jQuery - 응용 예제(음성 녹음, 녹음 파일 저장)  (7) 2021.12.15
jQuery - 효과  (0) 2021.12.15
jQuery - DOM 요소 클래스 속성(CSS 동적 적용)  (0) 2021.12.15
jQuery - DOM 요소의 추가 및 삭제  (0) 2021.12.15
jQuery - DOM 요소 조작  (0) 2021.12.15
'FE/jQuery' Related Articles more
Comments