#베지에 곡선 그리기
- 2차 베지에 곡선
quadraticCurveTo(제어점x, 제어점y, 종료점x, 종료점y)
<예시>
context.moveTo(50, 50);
context.quadraticCurveTo(200, 200, 400, 50);
context.stroke();
- 3차 베지에 곡선
bezierCurveTo(제어점x1, 제어점y1, 제어점x2, 제어점y2, 종료점x, 종료점y)
<예시>
context.moveTo(50, 50);
Context. bezierCurveTo(70, 200, 150, 200, 200, 50);
context.stroke();
context.beginPath();
context.moveTo(50,50);
context.quadraticCurveTo(200, 350, 350, 50);
context.stroke();
context.beginPath();
context.moveTo(350,350);
context.bezierCurveTo(300, 50, 600, 100, 650, 350);
context.fill();
# 선 스타일 지정
1. lineWidth : 선 두께 지정 (기본 1.0)
2. lineCap : 선 끝부분의 스타일 지정 (butt, round, square)
3. lineJoin : 선이 꺾이는 부분의 스타일 지정 (bevel, round, miter)
4. strokeStyle : 선 색 지정
1.lineWidth
context.moveTo(150, 50);
context.lineTo(150, 200);
context.lineWidth = 5;
context.stroke();
2. lineCap (기본-butt)
context.lineCap = ' 속성 값'
3. lineJoin (기본-miter)
context.lineJoin = ' 속성 값'
4. strokeStyle
context.strokeStyle = ' 속성 값'
<<선 그리기 예시>>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 선 스타일 지정하기 </title>
<script type="text/javascript">
function line()
{
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.beginPath();
context.moveTo(50,50);
context.lineTo(250,350);
context.lineTo(250,100);
context.lineWidth = 25;
context.strokeStyle = '#00FF00';
context.lineCap = 'round';
context.lineJoin = 'miter';
context.stroke();
}
</script>
</head>
<body onload="line();">
<canvas id="canvas" width="300" height="400" style="border:solid 1px #000000">
canvas 사용하기
</canvas>
</body>
</html>
# 단색 채우기 스타일 지정 (fill style)
context.fillStyle = '속성값';
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 채우기 </title>
<script type="text/javascript">
function rect()
{
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.lineWidth = 15;
context.fillStyle = 'red';
context.fillRect(30, 30, 150, 150);
context.strokeStyle = 'blue';
context.strokeRect(30, 30, 150, 150);
}
</script>
</head>
<body onload="rect();">
<canvas id="canvas" width="210" height="210" style="border:solid 1px #000000">
canvas 사용하기
</canvas>
</body>
</html>
=========> fillStyle을 먼저 지정해주느냐 strokeStyle을 먼저 지정해주느냐에 따라 선 두께가 달라짐.
(선의 중간부분정도 부터 fill영역이므로... stokeStyle을 나중에 지정해주어야 원하는 두께를 얻을 수 있다. )
# globalAlpha 속성 (색의 투명도 지정 ( 0.0 ~ 1.0 ))
context.globalAlpha='속성값'
# 선형 그라데이션 효과
1. createLinearGradient( x1, y1, x2, y2 ) : 선형 그라데이션 지정
2. createRadialGradient( x1, y1, r1, x2, y2, r2 ) : 원형 그라데이션 지정
3. addColorStop (오프셋, 색상) : 그라데이션 경계색 지정
var 변수 = context.createLinearGradient(x1, y1, x2, y2);
변수.addColorStop(시작점, 색상);
변수.addColorStop(중간점, 색상); // 생략가능
변수.addColorStop(끝점, 색상);
context.fillStyle = 변수;
시작점(0) - 중간점 (0.x) - 끝점 (1)
var gradient = context.createLinearGradient(0, 0, 150, 150);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'red');
context.fillStyle = gradient;
context.fillRect(0, 0, 150,150);
context.fillRect(0, 0, 150,150); => 이 값이 바뀔때 예시.
context.createLinearGradient(0, 0, 150, 150); => 이 값이 바뀔때 예시 (그라데이션의 방향을 바꿀때)
# 원형 그라데이션 효과
var 변수 = context.createRadialGradient(x1, y1, r1, x2, y2, r2);
변수.addColorStop(시작점, 색상);
변수.addColorStop(끝점, 색상);
context.fillStyle = 변수;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 원호 그리기 </title>
<script type="text/javascript">
function rect()
{
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
var gradient = context.createRadialGradient(100, 100, 10, 100, 100, 90);
gradient.addColorStop(0,"yellow");
gradient.addColorStop(1,"blue");
context.fillStyle = gradient;
//context.arc(100,100,90,0, 360*Math.PI/180, true);
//context.fill();
context.fillRect(25, 25, 150, 150);
}
</script>
</head>
<body onload="rect();">
<canvas id="canvas" width="200" height="200" style="border:solid 1px #000000">
canvas 사용하기
</canvas>
</body>
</html>
'# Work > └ html5&css3' 카테고리의 다른 글
| css3 브라우저별 지원 현황 (0) | 2014.01.21 |
|---|---|
| css selector (선택자) 의 종류와 브라우저별 지원 여부 (0) | 2014.01.21 |
| safari에서 이미지에 border + border-radius 적용시 border-radius가 제대로 적용되지 않을경우 (1) | 2013.11.21 |
| canvas 요소 (0) | 2013.11.12 |
| html5 속성들 (html5 오픈컨퍼런스 by 정찬명님 발표 동영상을 보고...) (0) | 2011.12.19 |
