s01_basic.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스 연습</title>
<style type="text/css">
#canvas{
border:1px solid #999;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="300">
캔버스를 지원하지 않는 브라우저 입니다.<!-- 미지원 브라우저일 경우 텍스트 또는 이미지로 대체 가능 -->
</canvas>
</body>
</html>
s02_fillRect.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); //사각형 -> x,y,width,height
//색상 및 알파값 지정(0.0완전 투명 ~1.0완전 불투명)
context.fillStyle = 'rgba(0,0,200,0.5)';
//사각형
context.fillRect(50,50,100,100);//사각형 ->x,y,width,height
//특정 영역을 지우고 완전 투명
context.clearRect(60,60,40,40);
//선의 색상 지정
context.strokeStyle = 'rgb(200,0,250)';
//테두리만 있는 사각형
context.strokeRect(200,50,70,150);
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
</body>
</html>
s03_moveTo.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');
/*
선그리기
1. 패스 시작
2. 선 그리기
3. 패스 닫기
*/
context.beginPath(); //패스 시작
context.moveTo(50,50); //시작점을 표시함
context.lineTo(80,80); //왼쪽 작은 직선
context.moveTo(140,80); //새로운 시작점 표시
context.lineTo(170,50); //오른쪽 작은 직선
context.moveTo(60,150); //새로운 시작점 표시
context.lineTo(170,150); //아래 직선
context.closePath();// 패스 끝
context.stroke(); //경로에 테두리 표시, 명시하지 않으면 선이 그려지지 않음
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
</body>
</html>
s04_moveTo.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.beginPath();
context.moveTo(50,50); //시작점 표시
context.lineTo(150,50);
context.lineTo(50,150);
context.closePath();
context.fill();//도형 내부를 채우는 역할
//빨간색 테두리 삼각형
context.beginPath(); //패스 시작
context.moveTo(80,80);//시작점 표시
context.lineTo(200,100);//첫번째 선
context.lineTo(100,200);//두번째 선
context.closePath(); //패스 끝 (자동으로 마지막 선이 생기면서 선들을 연결시킴)
context.strokeStyle = 'rgb(200,0,0)';
context.stroke();
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
</body>
</html>
'쌍용교육(JAVA) > JavaScript' 카테고리의 다른 글
| 쌍용교육 -JavaScript수업 40일차 HTMLCanvas(3) (0) | 2024.04.15 |
|---|---|
| 쌍용교육 -JavaScript수업 40일차 HTMLCanvas(2) (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 39~40일차 HTMLFile (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 39일차 HTMLWebStorage (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 39일차 JSRegular (0) | 2024.04.15 |
s01_basic.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스 연습</title>
<style type="text/css">
#canvas{
border:1px solid #999;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="300">
캔버스를 지원하지 않는 브라우저 입니다.<!-- 미지원 브라우저일 경우 텍스트 또는 이미지로 대체 가능 -->
</canvas>
</body>
</html>
s02_fillRect.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); //사각형 -> x,y,width,height
//색상 및 알파값 지정(0.0완전 투명 ~1.0완전 불투명)
context.fillStyle = 'rgba(0,0,200,0.5)';
//사각형
context.fillRect(50,50,100,100);//사각형 ->x,y,width,height
//특정 영역을 지우고 완전 투명
context.clearRect(60,60,40,40);
//선의 색상 지정
context.strokeStyle = 'rgb(200,0,250)';
//테두리만 있는 사각형
context.strokeRect(200,50,70,150);
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
</body>
</html>
s03_moveTo.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');
/*
선그리기
1. 패스 시작
2. 선 그리기
3. 패스 닫기
*/
context.beginPath(); //패스 시작
context.moveTo(50,50); //시작점을 표시함
context.lineTo(80,80); //왼쪽 작은 직선
context.moveTo(140,80); //새로운 시작점 표시
context.lineTo(170,50); //오른쪽 작은 직선
context.moveTo(60,150); //새로운 시작점 표시
context.lineTo(170,150); //아래 직선
context.closePath();// 패스 끝
context.stroke(); //경로에 테두리 표시, 명시하지 않으면 선이 그려지지 않음
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
</body>
</html>
s04_moveTo.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.beginPath();
context.moveTo(50,50); //시작점 표시
context.lineTo(150,50);
context.lineTo(50,150);
context.closePath();
context.fill();//도형 내부를 채우는 역할
//빨간색 테두리 삼각형
context.beginPath(); //패스 시작
context.moveTo(80,80);//시작점 표시
context.lineTo(200,100);//첫번째 선
context.lineTo(100,200);//두번째 선
context.closePath(); //패스 끝 (자동으로 마지막 선이 생기면서 선들을 연결시킴)
context.strokeStyle = 'rgb(200,0,0)';
context.stroke();
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
</body>
</html>
'쌍용교육(JAVA) > JavaScript' 카테고리의 다른 글
| 쌍용교육 -JavaScript수업 40일차 HTMLCanvas(3) (0) | 2024.04.15 |
|---|---|
| 쌍용교육 -JavaScript수업 40일차 HTMLCanvas(2) (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 39~40일차 HTMLFile (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 39일차 HTMLWebStorage (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 39일차 JSRegular (0) | 2024.04.15 |
