s05_arc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스 연습</title>
<script type="text/javascript">
window.onload = function(){
const canvas = document.getElementById('canvas');
if(canvas.getContext){
const context = canvas.getContext('2d');
/*
arc메서드에서의 각도는 도(degree)로 표기하지 않고 라디안 값으로 표기함
표시 1라디안은 180/Math.PI, 60도:(Math.PI/180)*60
360도:Math.PI*2
1.5파이(270도)
|
|
|
1파이(180도)---------중심점---------0파이,2파이(0도,360도)
|
|
|
0.5파이(90도)
X,Y 위치에서 시작해서 반시계방향(anticlockwise)으로 반지름(r)만큼의 원을 그림.
startAngle 과 endAngle 매개변수는 호의 시작점과 끝점을 의미
*/
//(70,70)에서 반시계방향으로 반지름 20px인 원을 그리는데, 60도까지만 그리고 테두리만 표시
//테두리만 표시
context.beginPath();
//x,y,r(반지름),시작각도,끝각도,반시계방향 지정
context.arc(70,70,20,0,(Math.PI/180)*60,true);
//context.closePath();
context.stroke();
//(130,110)에서 반시계방향으로 반지름 50인 원을 그리고 색을 채움.
//끝 각도를 360도 즉, 2파이 라디안으로 하면 전체 원이 그려짐
context.beginPath();
context.arc(130,110,50,0,Math.PI*2,true);
context.closePath(); // 360도이기 떄문에 생략 가능
context.fillStyle = 'rgb(0,200,200)';
context.fill();//도형 내부를 채우는 역할
context.stroke();
//(190,70)에서 반시계방향으로 반지름 20인 원을 그리고 110도에서 170도까지만 그림. 테두리 표시
context.beginPath();
context.arc(190,70,20,(Math.PI/180)*110,(Math.PI/180)*170,true);
context.stroke();
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
</body>
</html>
s06_color.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스 연습</title>
<script type="text/javascript">
window.onload = function(){
const canvas = document.getElementById('canvas');
if(canvas.getContext){
const context = canvas.getContext('2d');
//색상 지정
context.fillStyle = 'rgb(200,0,0)';
context.fillRect(10,10,100,100);
//16진수 색상 코드 색상 지정
context.fillStyle = '#0c30c3';
context.fillRect(50,50,100,100);
context.beginPath();//완전한 원일 경우 생략 가능
context.arc(250,90,80,0,Math.PI*2,true);
context.closePath();//완전한 원일 경우 생략 가능
context.fillStyle = 'yellow';
context.strokeStyle = 'blue';
context.fill();
context.stroke();
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
</body>
</html>
s07_alpha.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스 연습</title>
<script type="text/javascript">
window.onload = function(){
const canvas = document.getElementById('canvas');
if(canvas.getContext){
const context = canvas.getContext('2d');
context.fillStyle = 'rgba(255,51,0,1.0)';//완전 불투명
context.fillRect(10,10,150,30);
context.fillStyle = 'rgba(255,51,0,0.8)';
context.fillRect(10,40,150,30);
context.fillStyle = 'rgba(255,51,0,0.6)';
context.fillRect(10,70,150,30);
context.fillStyle = 'rgba(255,51,0,0.4)';
context.fillRect(10,100,150,30);
context.fillStyle = 'rgba(255,51,0,0.2)';
context.fillRect(10,130,150,30);
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
</body>
</html>
s08_shadow.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스 연습</title>
<script type="text/javascript">
window.onload = function(){
const canvas = document.getElementById('canvas');
if(canvas.getContext){
const context = canvas.getContext('2d');
//객체로부터 그림자가 x축 방향으로 얼마나 떨어져 있는가를 나타냄.
//기본값은 0이며, 음수이면 왼쪽에 그림자가 생김
context.shadowOffsetX = 10;
//객체로 부터 그림자가 y축 방향으로 얼마나 떨어져 있는가를 나타냄.
//기본값은 0이며, 음수이면 위쪽에 그림자가 생김
context.shadowOffsetY = 10;
//그림자가 얼마나 흐릿한가 나타냄. 기본값은 0
context.shadowBlur = 25;
//그림자 색상을 지정하는데 기본값은 검정색
context.shadowColor = '#000000';
context.fillRect(10,10,100,100);
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
</body>
</html>
'쌍용교육(JAVA) > JavaScript' 카테고리의 다른 글
| 쌍용교육 -JavaScript수업 40일차 ch31_HTMLGeolocation (0) | 2024.04.15 |
|---|---|
| 쌍용교육 -JavaScript수업 40일차 HTMLCanvas(3) (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 40일차 HTMLCanvas(1) (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 39~40일차 HTMLFile (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 39일차 HTMLWebStorage (0) | 2024.04.15 |
