본문 바로가기
Study/HTML5,CSS,JQuery

[HTML5/CSS3/JQUERY] canvas

힝쏘 2019. 5. 21. 10:57

1. 선 그리기, 대각선 그리기, 사각형 그리기, 그림자 주기

 

 

2. 선 그리기, 사각형 그리기, 반원 그리기, 문자열 그리기, 이미지 적용하기,작은 정사각형 흩뿌리기

 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    window.onload = function() { 
        var canvas = document.getElementById("mycanvas"); 
        var context = canvas.getContext("2d"); 
         
        // 사각형 그리기 - 메소드는 까페 참고 
        context.fillRect(200, 5, 20, 20); 
        context.strokeRect(300, 5, 20, 30); 
         
        // 선 그리기 
        context.strokeStyle = "rgb(200, 0, 0)"; 
        context.lineWidth = 2; 
        context.beginPath();        // 중요 - 그리기 시작 
        context.moveTo(0, 0); 
        context.lineTo(100, 100); 
        context.stroke(); 
        context.closePath();        // 중요 - 그리기 끝 
         
        // 원호 그리기 
        context.fillStyle = "rgb(0, 200, 0)";    // 채움색 
        context.strokeStyle = "rgb(200, 0, 0)";    // 테두리선색 
        context.lineWidth = 5; 
        context.beginPath();        // 중요 - 그리기 시작 
        // cx, cy, radius, start_angle, end_angle(high값), direction(방향:true-위쪽둥글,false-아래쪽둥글) 
        context.arc(100, 200, 50, 0, Math.PI, false);     
        context.closePath();        // 중요 - 그리기 종료 
         
        context.stroke();            // 테두리만 표시 
        context.fill();                // 속이 채워진다. 
         
        // 90도 표시 시작 
        // 상단 우측 
        context.beginPath(); 
        context.moveTo(230, 400); 
        //context.lineTo(230, 400); 
        context.arc(230, 400, 30, 0, 270*Math.PI/180, true); 
        context.lineTo(230, 400); 
        context.closePath(); 
        context.stroke(); 
         
        // 상단 좌측 
        context.beginPath(); 
        context.moveTo(220, 400); 
        context.arc(220, 400, 30, 180*Math.PI/180, 270*Math.PI/180, false); 
        context.lineTo(220, 400); 
        context.closePath(); 
        context.stroke(); 
         
        // 하단 좌측 
        context.beginPath(); 
        context.moveTo(220, 410); 
        context.arc(220, 410, 30, 180*Math.PI/180, 90*Math.PI/180, true); 
        context.lineTo(220, 410); 
        context.closePath(); 
        context.stroke(); 
         
        // 하단 우측 
        context.beginPath(); 
        context.moveTo(230, 410); 
        context.arc(230, 410, 30, 0, 90*Math.PI/180, false); 
        context.lineTo(230, 410); 
        context.closePath(); 
        context.stroke(); 
        // 90도 표시 끝 
         
        // 문자열 
        context.lineWidth = 2; 
        var str = "HTML5 그리기"; 
        context.fillStyle = "rgb(0, 0, 0)"; 
        context.font = "48px Arial"; 
        context.fillText(str, 300, 200);    // 속 채워서 그리기 
        context.strokeText(str, 300, 280);    // 선만 그리기 
         
        context.font = "20px Arial"; 
        // 정렬, top,bottom,middle,alphabetic 
        context.fillText("good", 0, 350); 
        context.textBaseline = "top";             
        context.strokeText("good", 50, 350); 
        context.textBaseline = "bottom";         
        context.strokeText("good", 100, 350); 
        context.textBaseline = "middle";         
        context.fillText("good", 150, 350); 
        context.textBaseline = "alphabetic";     
         
        // 작은 사각형 흩뿌리기 - 5px 짜리 좌표가 랜덤인 작은 사각형 100개 그리기 
        for (var i=0; i<100; i++) { 
            context.fillStyle = "rgb(200, 200, 0)"; 
            var xx = Math.random()*800; 
            var yy = Math.random()*800; 
            context.fillRect(xx, yy, 5, 5); 
        } 
         
        // 이미지 적용 
        var img1 = new Image(); 
        var img2 = new Image(); 
        img1.src = "image/img01.jpg"; 
        img2.src = "image/img02.jpg"; 
        img1.onload = function() { 
            context.drawImage(img1, 650, 0);    // 이미지, x, y 
            context.save(); 
        }; 
        img2.onload = function() { 
            context.drawImage(img2, 400, 300, 150, 180);    // 이미지, x, y, width, height 
            context.save(); 
        }; 
    }; 
</script> 
</head> 
<body> 
    <h2>캔바스를 이용해서 도형 그리기 연습</h2> 
    <canvas id="mycanvas" width="800" height="500" style="border:3px solid red;"></canvas> 
</body> 
</html>

 

 

 

3. canvas에 이미지 전달(고전적인 방법, 태그에서 직접 이벤트 부여/자바스크립트에서 이벤트를 부여하여 호출)

하단 이미지를 클릭하면 canvas에 해당 이미지가 그려진다.

이미지는 아무거나 해도 되어서 따로 첨부는 안했다.

방법1: 고전적인 방법, 태그에서 직접 이벤트 부여 방법2: 자바스크립트에서 이벤트를 부여하여 호출

방법2: 자바스크립트에서 이벤트를 부여하여 호출

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<style type="text/css"> 
    nav ul li{ list-style:none; float:left; } 
    nav ul li img{ width:120px; padding-left:10px; border:0px; } 
</style> 
<script type="text/javascript"> 
    var canvas;  
    var context; 
    var image; 
     
    window.onload = function() { 
        canvas = document.getElementById("mycanvas"); 
        context = canvas.getContext("2d"); 
         
        // 방법 1 
        image = new Image(); 
        image.src = "image/img01.jpg"; 
        image.onload = function() { 
            context.drawImage(image, 100, 0, 300, canvas.height); 
        }; 
         
        // 방법 2 
        img01Attr = document.getElementById("img01").getAttribute("src"); 
        document.getElementById("img01").onclick = function() { 
            // 함수에 src 이미지 전달 
            changeImage2(img01Attr); 
        }; 
        img02Attr = document.getElementById("img02").getAttribute("src"); 
        document.getElementById("img02").onclick = function() { 
            // 함수에 src 이미지 전달 
            changeImage2(img02Attr); 
        }; 
        img03Attr = document.getElementById("img03").getAttribute("src"); 
        document.getElementById("img03").onclick = function() { 
            // 함수에 src 이미지 전달 
            changeImage2(img03Attr); 
        }; 
        img04Attr = document.getElementById("img04").getAttribute("src"); 
        document.getElementById("img04").onclick = function() { 
            // 함수에 src 이미지 전달 
            changeImage2(img04Attr); 
        }; 
    }; 
     
    // 방법1: 고전적인 방법, 태그에서 직접 이벤트 부여 
    function changeImage1(img) { 
        // 캔버스 전체 이미지 삭제 
        context.clearRect(0, 0, canvas.width, canvas.height); 
        image.src = img.src;    // 이미지 자체를 넣어줘야 해서 src를 받는다. 
        context.drawImage(image, 100, 0, 300, canvas.height); 
    }; 
     
    // 방법2: 자바스크립트에서 이벤트를 부여하여 호출 
    function changeImage2(img) { 
        // 캔버스 전체 이미지 삭제 
        context.clearRect(0, 0, canvas.width, canvas.height); 
        image.src = img;         
        context.drawImage(image, 100, 0, 300, canvas.height); 
    }; 
</script> 
</head> 
<body> 
    <canvas id="mycanvas" width="500" height="300" style="border:1px solid magenta;"></canvas> 
    <nav> 
        <ul> 
            <!-- 고전적인 방법 : 이벤트를 body에 직접 주는 방식 -->
            <!-- <li><img src="image/img01.jpg" id="img01" onclick="changeImage1(this)"/></li> --> 
             
            <li><img src="image/img01.jpg" id="img01"/></li> 
            <li><img src="image/img02.jpg" id="img02"/></li> 
            <li><img src="image/img03.jpg" id="img03"/></li> 
            <li><img src="image/img04.jpg" id="img04"/></li>  
        </ul> 
    </nav> 
</body> 
</html>

 

방법 3: jQuery에서 이벤트 부여하여 호출(code 변환이 안되서 그냥 복사~)

<!--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
 nav ul li{ list-style:none; float:left; }
 nav ul li img{ width:120px; padding-left:10px; border:0px; }
</style>

<script type="text/javascript">
 var canvas; 
 var context;
 var image;

 $(document).ready(function() {
  // 이전 onload에서 했던 방법들을 여기서 해준다.
  // id값을 가져올 때는 # 꼭 필수로 추가
  canvas = $("#mycanvas")[0]; // canvas가 여러개 이면 [0] 추가
  
  context = canvas.getContext("2d");

  image = new Image();
  image.src = "image/img01.jpg";
  $(image).load(function() {
   context.drawImage(image, 100, 0, 300, canvas.height);
  });

  // jQuery 식
  $("#img01").click(function() {
   // 현재 이미지 아이디 값의 src값을 가져와 changeImage2 함수에 보낸다.
   changeImage2($(this).attr("src"));
  });

  $("#img02").click(function() {
   // 현재 이미지 아이디 값의 src값을 가져와 changeImage2 함수에 보낸다.
   changeImage2($(this).attr("src"));
  });

  $("#img03").click(function() {
   // 현재 이미지 아이디 값의 src값을 가져와 changeImage2 함수에 보낸다.
   changeImage2($(this).attr("src"));
  });

  $("#img04").click(function() {
   // 현재 이미지 아이디 값의 src값을 가져와 changeImage2 함수에 보낸다.
   changeImage2($(this).attr("src"));
  });
 });

 // 방법2: 자바스크립트에서 이벤트를 부여하여 호출
 function changeImage2(img) {
  // 캔버스 전체 이미지 삭제
  context.clearRect(0, 0, canvas.width, canvas.height);
  image.src = img;  
  context.drawImage(image, 100, 0, 300, canvas.height);
 };
</script>
</head>
<body>
 <canvas id="mycanvas" width="500" height="300" style="border:1px solid magenta;"></canvas>
 <nav>
  <ul>
   
   
   <li><img src="image/img01.jpg" id="img01"/></li>
   <li><img src="image/img02.jpg" id="img02"/></li>
   <li><img src="image/img03.jpg" id="img03"/></li>
   <li><img src="image/img04.jpg" id="img04"/></li> 
  </ul>
 </nav>
</body>
</html>

 

저작자표시

'Study > HTML5,CSS,JQuery' 카테고리의 다른 글

[HTML5/CSS3/JQUERY] drag & drop 예제  (0) 2019.05.22
[HTML5/CSS3/JQUERY] audio와 video 예제  (0) 2019.05.21
[HTML5/CSS3/JQUERY] HTML5에서 새로 지원하는 폼태그 경험하기  (0) 2019.05.21
[HTML5/CSS3/JQUERY] 인터넷 브라우저 별 input type range 알아보기  (0) 2019.05.21
[HTML5/CSS3/JQUERY] header,section,article,aside,footer  (0) 2019.05.21

'Study/HTML5,CSS,JQuery' Related Articles

티스토리툴바