메뉴 건너뛰기

kode2.com

HTML5 Canvas

2019.02.18 15:31

kode2 조회 수:74

1) 패스 그리는 순서 

    .beginPath()

    .moveTo()

    .closePath() : Fill() 호출시 자동으로 path가 종료됨.

 

           선 그리기

           . context.lineTo(x,y)

 

           베이지 곡선 그리기

           .context.bezierCurveTo(controlPointX1, controlPointY1, controlPointX2, controlPointY2,

                                  endPointX, endPointY)

           2차 곡선

           .context.quadraticCurveTo(controlPointX, controlPointY, endPointX, endPointY)

    

           ARC 그리기

           .arc(centerX, centerY, radius, startingAngel, endingAngel, counter-clockwise);

    .stroke() 외곽선

    .fill() 채우기

 

    사각형 그리기

    .ract(positionX, positionY, width, height)

 

    em : 상대적인 폰트 크기 지정 , 특정 부모 요소의 폰트 크기에 비례해서 크기를 정함.

    canvas : font-size: 10px; 

                        2em; <-- 10px * 2 : 20px;

  

    .save() : 현재의 스타일 저장

           .restore() : 마지막에 저장된 메서드 호출;

 

 

 

/* 코드 자세한건 소스 첨부 할테니 직접 이것저것 바꿔보시길!! */

 

 

 

<!doctype html>

<html>

<head>

 <title>Canvas</title>

 <script type='text/javascript' src = 'jquery-1.7.2.js' ></script>

</head>

<body>

 <canvas id = 'canvasId' style='width:1000px;height:500px;border:solid 1px black;'>

 

  <!-- * canvas width & height 값을 지정하지 않으면 default 300 * 150 -->

    귀하의 웹 브라우저는 HTML5의 canvas를 지원하지 않습니다.

 

  <!-- Canvas를 지원하지 않는 브라우저 일 경우 위 메세지 출력-->

 </canvas>

<script type='text/javascript' >

//var myCan = document.getElementById('canvasId');

 

// Canvas 의 제어는 스크립트를 통해서 처리

 

 

//var context = myCan.getContext('2d');

 

 

 

$( 

function () 

{ 

 drawLogo(); 

// drawRect();

// drawStyle();

// drawText();

// em();

});

 

function drawLogo()

{

 

 var can = document.getElementById('canvasId'); 

 var context = can.getContext('2d');

 

 context.lineWidth = 4;

 context.beginPath();

 

// context.moveTo(100, 100);

 context.moveTo(10, 10);

 

 context.arc(10, 25, 15, Math.PI * 1.5, Math.PI * 0.5, false);

 

// context.arc(190, 125, 25, Math.PI * 1.5, Math.PI * 0.5, true);

 

 context.stroke();

 

 

 context.beginPath();

 context.moveTo(165, 125);

 context.lineTo(190, 125);

 context.stroke();

 

 context.beginPath();

 context.moveTo(198,100);

 context.arc(198, 125, 25, Math.PI * 1.5, Math.PI * 0.5, false);

 context.closePath();

 context.stroke();

 

 context.beginPath();

 context.moveTo(73.3, 121.0);

 

 context.bezierCurveTo(73.3, 121.0, 76.7, 123.7, 81.3, 123.3);

 context.bezierCurveTo(81.3, 123.3, 100.3, 116.5, 104.0, 117.0);

 context.bezierCurveTo(112.0, 118.0, 120.0, 131.3, 125.3, 131.0);

 context.bezierCurveTo(130.0, 130.8, 136.7, 127.0, 136.7, 127.0);

 context.bezierCurveTo(136.0, 127.0, 144.7, 120.3, 148.3, 126.3);

 context.bezierCurveTo(153.0, 134.8, 150.0, 128.0, 158.9, 128.0);

 context.stroke();

 

}

 

function drawRect()

{

 var can = document.getElementById('canvasId'); 

 var context = can.getContext('2d');

 

 context.beginPath();

 context.fillRect(10, 10, 60, 60);

 

 context.beginPath();

 context.lineWidth = 10;

 context.strokeRect(100,50, 40, 40);

 

 context.beginPath();

 context.lineWidth = 2;

 //context.arc(150, 50, 90, 0, Math.PI, true);

 context.arc(150, 50, 20, 0, Math.PI , true);

 context.stroke(); 

}

 

function drawStyle()

{

 var can = document.getElementById('canvasId'); 

 var context = can.getContext('2d');

 

 context.beginPath();

 context.fillStyle = '#ed1c24';

 context.rect(0,0, 200, 200);

 context.fill();

 

 context.beginPath();

 context.lineWidth = 5;

 context.strokeStyle = '#1b1464';

 context.fillStyle = '#29abe2';

 context.arc(100, 100, 50, 0, Math.PI * 2, true);

 context.stroke();

 context.fill(); 

}

 

function drawText()

{

 var can = document.getElementById('canvasId'); 

 var context = can.getContext('2d');

 

 context.font = 'bold 15px arial'; 

 context.strokeStyle = '#993300';

 context.fillStyle = '#ffff09';

 

 context.font = 'bold 60px arial';

 context.textAling = 'center';

 context.lineWidth = 5;

 context.lineJoin = 'round';

 context.fillText("HTML5", 50, 140);

 

// context.font = 'bold 15px arial';

 context.strokeText("HTML5", 50, 140);

 

}

 

function em()

{

 var can = document.getElementById('canvasId'); 

 var context = can.getContext('2d');

 

 context.font = '0.8em arial';

 context.fillText("HTML5 CSS JQUERY" , 10, 50);

 

 context.font = '2em arial';

 context.fillText("HTML5 CSS JQUERY" , 10, 100);

 

 context.font = '14px arial';

 context.fillText("HTML5 CSS JQUERY" , 10, 150); 

}

 

 

 

/* 에니메이션 처리 */

 

 

 

var can; 

var context;

var xpos = 50; 

var ypos = 50; 

var speed = 3; 

var dirX = 0;

var dirY = 1;

 

 

window.onload = init;

 

function init()

{

 

 

 if(!!document.getElementById('canvasId').getContext) 

 {

  can = document.getElementById('canvasId'); 

  context = can.getContext('2d');

  setInterval(animate, 20); //간격 설정 0.02초 간격으로 func call 

 }

 else {}

}

 

function drawBall(x, y){

  context.beginPath();

  context.arc(x,y, 20, 0, Math.PI * 2, true);

  context.fillStyle = 'blue';

  context.fill();

}

 

function animate()

{

 clearContext();

 

 if(xpos >= can.width-20 || xpos <= 20)

  dirX *= -1;

 

 if(ypos >= can.height-20 || ypos < 20)

  dirY *= -1;  

 

 xpos += speed * dirX;

 ypos += speed * dirY;

 

 drawBall(xpos , ypos ); 

}

 

function clearContext()

{

 context.clearRect(0,0,can.width, can.height);

}

*/

</script>

</body>

</html>

 

 

 

 /*IE 9, Firefox, Opera, Crome 에서 구동됩니다. 특히 IE 9 이하 버전은 HTML5 지원 않해요.*/

, 이 게시물을
목록
목록
쓰기
태그