HTML5 Canvas
2019.02.18 15:31
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 지원 않해요.*/
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
13 | HTML 문서의 margin 이란? | kode2 | 2019.05.16 | 58 |
12 | 특정 시간이나 요일에만 메뉴를 표시 | kode2 | 2019.05.16 | 59 |
11 | 오른쪽 마우스 금지소스 | kode2 | 2019.05.16 | 60 |
10 | CSS 제작에 관한 10가지 팁 | kode2 | 2019.05.16 | 63 |
9 | 홈페이지 제작시 로그인 문제 해결 P3P코드 | kode2 | 2019.05.16 | 59 |
8 | 페이지 폰트 조절하기 | kode2 | 2019.05.16 | 59 |
7 | 페이지 스크롤바 색깔바꾸기 | kode2 | 2019.05.16 | 61 |
6 | 링크주소 굵은줄 생기기 | kode2 | 2019.05.16 | 61 |
5 | 링크주소 밑줄 없애기 | kode2 | 2019.05.16 | 62 |
4 | CSS로 테이블 행 및 열 고정 처리 | kode2 | 2019.02.18 | 67 |
3 | 헤더 영역은 고정하고, 컨텐츠 영역만 스크롤 처리 | kode2 | 2019.02.18 | 68 |
2 | HTML5 Storage | kode2 | 2019.02.18 | 61 |
» | HTML5 Canvas | kode2 | 2019.02.18 | 62 |