s09_quadraticCurveTo.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');
/*
quadraticCurveTo(cp1x,cp2py,x,y):한 개의 조절점,
즉(cp1x,cp1y)를 이용해서 (x,y)까지의 곡선을 그림
*/
context.beginPath();
//시작점을 (50,200)에 표시
context.moveTo(50,200);
//(200,50)을 조절점으로 해서 현재 위치 (50,200)에서 (350,200)까지 곡선을 그림
context.quadraticCurveTo(200,50,350,200);
context.stroke();
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
<br><br>
<img src ="../files/exp_01.gif">
</body>
</html>
s10_bezierCurveTo.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');
/* bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) :두개의 조절점
즉 (cp1x,cp1y)와 (cp2x,cp2y,)를 이용해서 (x,y)까지의 곡선을 그림
*/
context.beginPath();
//시작점을 (50,200)에 표시
context.moveTo(50,200);
//조절점 두 개 사용해서 곡선을 그림
context.bezierCurveTo(90,50,310,50,350,200);
context.stroke();
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
<br><br>
<img src ="../files/exp_02.gif">
</body>
</html>
s11_image.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');
//Image 객체 생성
const img = new Image();
img.src = '../files/landscape.jpg';
img.onload = function(){
//Image 객체에 저장된 이미지 정보를 이용해서 canvas에 이미지 표시
context.drawImage(img,10,10); //이미지 객체,x,y
context.fillStyle = 'rgb(200,0,0)';
context.fillRect(20,20,100,100);
};
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="800" height="400">
</canvas>
</body>
</html>
s12_image.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');
//Image 객체 생성
const img = new Image();
img.src = '../files/landscape.jpg';
img.onload = function(){
//이미지객체,x좌표,y좌표
context.drawImage(img,10,10); //원래 크기 표기
//이미지객체,x좌표,y좌표,width,height
context.drawImage(img,10,500,200,100);
};
}else{
alert('브라우저가 캔버스를 지원하지 않습니다.');
}
};
</script>
</head>
<body>
<canvas id="canvas" width="800" height="700">
</canvas>
</body>
</html>
s13_pattern.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');
//Image 객체 생성
const img = new Image();
img.src = '../files/pattern.png';
img.onload = function(){
//이미지 반복 지정(repeat,repeat-x,repeat-y,no-repeat)
let pttn = context.createPattern(img,'repeat');
//생성한 패턴 지정
context.fillStyle = pttn;
context.fillRect(0,0,500,300);
};
}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(2) (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 |
