노력이 좋아서
<step61>'js_canvas'
zoaseo
2022. 6. 16. 09:35
1) canvas01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
background-color: lightgray;
}
</style>
</head>
<body>
<canvas width="1000" height="600" id="canvas"></canvas>
<script>
let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "green"; //면 색상 지정
ctx.fillRect(100,50,100,100); //사각형 면 그리기
ctx.strokeStyle = "red"; //선 색상 지정
ctx.strokeRect(200,200,50,50); //사각형 선 그리기
ctx.clearRect(100,50,50,50); //지우기
</script>
</body>
</html>
2) canvas02-path.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
background-color: lightcyan;
}
</style>
<script>
function draw(){
let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext("2d");
//패스를 시작(펜 도구 선택)
ctx.beginPath();
//시작위치 - 처음 점 찍기
ctx.moveTo(70,50);
//선 그리기 - 다음 점 찍기
ctx.lineTo(150,50);
//선 그리기 - 다음 점 찍기
ctx.lineTo(150,150);
ctx.closePath();
ctx.stroke();
ctx.fill();
ctx.fillStyle = "red";
let num = 100;
for(let i=0; i<5; i++){
for(let j=0; j<5; j++){
ctx.fillRect(num+(j*80),num+(i*80),50,50);
}
}
}
</script>
</head>
<body onload="draw()">
<canvas width="1000" height="500" id="canvas"></canvas>
</body>
</html>3) canvas03-arc.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {background-color: lightblue;}
</style>
<script>
function draw(){
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,100,0,Math.PI*2,true);
ctx.moveTo(380,200);
ctx.arc(300,200,80,0,Math.PI,false);
ctx.stroke();
}
</script>
</head>
<body onload="draw()">
<canvas width="1000" height="500"></canvas>
</body>
</html>4) canvas04-arc_ex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {background-color: lightblue;}
</style>
<script>
function draw(){
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
//호와 원 그리기
//ctx.arc(x,y,radius,startA,endAngle,true)
//360도 Math.PI*2
//1도 Math.PI/180
for(let i=0; i<3; i++){
for(let j=0; j<3; j++){
ctx.beginPath();
let x = 150 + j*200;
let y = 100 + i*200;
let endA = Math.PI + (Math.PI*j)/2;
let anticlockwise = i%2 != 0 ? true : false;
ctx.arc(x,y,50,0,endA,anticlockwise);
if(i>1){ctx.fill();}
else{ctx.stroke();}
}
}
}
</script>
</head>
<body onload="draw()">
<canvas width="1000" height="600"></canvas>
</body>
</html>
5) canvas05-lineWidth.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {background-color: lightblue;}
</style>
<script>
function draw(){
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
let lineCap = ['butt','round','square'];
for(let i=0; i<10; i++){
ctx.lineWidth = 1+i;
ctx.lineCap = lineCap[i%3];
ctx.beginPath();
ctx.moveTo(5+i*16, 5);
ctx.lineTo(5+i*16, 140);
ctx.stroke();
}
}
</script>
</head>
<body onload="draw()">
<canvas width="1000" height="600"></canvas>
</body>
</html>
6) canvas05-name.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {background-color: lightblue;}
</style>
<script>
function draw(){
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
let lineCap = ['butt','round','square'];
//ㅎ
ctx.beginPath();
ctx.moveTo(70,50);
ctx.lineTo(70,70);
ctx.moveTo(20,70);
ctx.lineTo(120,70);
ctx.moveTo(100,120);
ctx.arc(70,120,30,0,Math.PI*2,true);
//ㅡ
ctx.moveTo(20,170);
ctx.lineTo(120,170);
//ㅣ
ctx.moveTo(140,50);
ctx.lineTo(140,180);
//ㅈ
ctx.moveTo(180,60);
ctx.lineTo(270,60);
ctx.moveTo(225,60);
ctx.lineTo(190,180);
ctx.moveTo(225,60);
ctx.lineTo(255,180);
//ㅐ
ctx.moveTo(280,50);
ctx.lineTo(280,180);
ctx.moveTo(280,110);
ctx.lineTo(300,110);
ctx.moveTo(300,50);
ctx.lineTo(300,180);
ctx.stroke();
}
</script>
</head>
<body onload="draw()">
<canvas width="1000" height="600"></canvas>
</body>
</html>
7) canvas06-image.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {background-color: lightblue;}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="500"></canvas>
<div style="display:none">
<img id="source" src="/canvas/images.jpg" width="300" height="227" alt="">
</div>
<script>
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
// const image = document.querySelector('#source');
// image.addEventListener('load',e=>{
// ctx.drawImage(image,50,100,250,150);
// })
//const imgElem = document.createElement('img');
const imgElem = new Image();
imgElem.src = '/canvas/images.jpg';
imgElem.addEventListener('load',()=>{
ctx.drawImage(imgElem,50,50,100,60);
ctx.drawImage(imgElem,200,50,100,60);
// ctx.drawImage(imgElem,400,100,200,140,400,100,50,50);
})
</script>
</body>
</html>
8) canvas07-event.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
background: #eee;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="700"></canvas>
<div id="btns">
<button>red</button>
<button>blue</button>
<button>pink</button>
<button>black</button>
<button>지우기</button>
<button>이미지</button>
</div>
<script>
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
let brush = 'color';
let imgElem = new Image();
imgElem.src = '/canvas/images.jpg';
//버튼 지정
const btns = document.querySelector('#btns')
let drawing;
canvas.addEventListener('mousemove',draw);
canvas.addEventListener('mousedown',function(){
drawing = true;
})
canvas.addEventListener('mouseup',function(){
drawing = false;
})
//버튼 이벤트 지정하기
btns.addEventListener('click',function(e){
let btnInner = e.target.innerHTML;
if(btnInner=='지우기'){
ctx.clearRect(0,0,canvas.width,canvas.height);
}else if(btnInner=='이미지'){
brush = 'img';
}else {
brush = 'color';
ctx.strokeStyle = btnInner;
}
})
function draw(e){
//선 두께
ctx.lineWidth = 5;
//선의 끝 부분 지정
ctx.lineCap = "round";
let x = e.pageX;
let y = e.pageY;
if(!drawing) return;
if(brush == 'color'){
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x,y);
ctx.stroke();
}else {
ctx.drawImage(imgElem,x,y,50,50);
}
}
</script>
</body>
</html>
9) divMoveInterval.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
position: absolute;
left: 100px;
top: 100px;
background-color: tomato;
transition: 0.5s;
}
</style>
</head>
<body>
<div></div>
<script>
const div = document.querySelector('div');
let divLeft = 100;
setInterval(function(){
div.style.left = divLeft+'px';
divLeft += 100;
if(divLeft>window.innerWidth){
divLeft = -50;
}
},500)
</script>
</body>
</html>10) divMoveRequest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
position: absolute;
left: 100px;
top: 100px;
background-color: tomato;
}
</style>
</head>
<body>
<div></div>
<button>정지</button>
<script>
const div = document.querySelector('div');
const btn = document.querySelector('button');
let animation;
let x = 100;
function divMove(){
x += 1;
div.style.left = x+'px';
animation = requestAnimationFrame(divMove); //재귀함수
}
divMove();
btn.addEventListener('click',function(){
cancelAnimationFrame(animation);
})
</script>
</body>
</html>11) canvas08-interaction.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
background: #eee;
}
</style>
</head>
<body>
<h1>Interaction</h1>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const boxes = [];
//글자 두께 크기 서체 지정
context.font = 'bold 24px sans-serif';
class Box {
constructor(index,x,y,speed){
this.index = index;
this.x = x;
this.y = y;
this.speed = speed;
this.width = 100;
this.height = 100;
this.draw();
}
draw(){
context.fillStyle = 'rgba(0,0,0,0.5)';
context.fillRect(this.x,this.y,this.width,this.height);
context.fillStyle = '#fff';
//fillText('내용',x,y)
context.fillText(this.index,this.x+30,this.y+30);
}
}
let tempX, tempY, tempSpeed;
for(let i=0; i<10; i++){
//speed는 1~5사이의 숫자로 지정
tempSpeed = Math.floor(Math.random()*5)+1;
tempX = Math.random() * canvas.width * 0.8;
tempY = Math.random() * canvas.height * 0.8;
boxes.push(new Box(i,tempX,tempY,tempSpeed));
}
console.log(boxes);
//box이동 시키기
function boxMove(){
context.clearRect(0,0,canvas.width,canvas.height);
boxes.forEach(box=>{
box.x += box.speed;
if(box.x>canvas.width){
box.x = -box.x;
}
box.draw();
})
requestAnimationFrame(boxMove);
}
boxMove();
</script>
</body>
</html>
12)