canvas_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: lightcoral;}</style>
</head>
<body>
<!-- 💚 안보이게하기 -->
<div style="display: none;">
<img id="source" src="../../SARAR 과제/img/thumb2.jpg" alt="" width="300" height="200">
</div>
<canvas id="canvas" width="400" height="800"></canvas>
<script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// 🧡 불러오기 (캔버스에 이미지 그리기)
// const image = document.querySelector('#source');
// image.addEventListener('load', e=>{ // load ) 이벤트 실행시 그려라
// // ctx.drawImage(image, 50, 50, 300, 200);
// ctx.drawImage(image, 50, 50); // 생략가능
// })
// 🧡 만들기 (이미지 객체 만들기)
// const imgElem = document.createElement('img');
const imgElem = new Image();
imgElem.src = '../../SARAR 과제/img/thumb2.jpg';
imgElem.addEventListener('load', () => {
ctx.drawImage(imgElem, 50, 50);
ctx.drawImage(imgElem, 150, 150);
ctx.drawImage(imgElem, 50, 230);
ctx.drawImage(imgElem, 40,10,80,60, 100, 500, 200, 150); // 8개 작성 ) 보여주고싶은만큼 자르기
})
</script>
</body>
</html>
canvas_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-color: gray;}
body{background-color: lightcyan;}
button{
margin: 0 10px;
padding: 10px 30px;
outline: none;
border: none;
cursor: pointer;
color: #fff;
font-size: 15px;
border-radius: 10px;
}
#red {background-color: red;}
#blue {background-color: blue;}
#pink {background-color: pink;}
#black {background-color: black;}
#img {background-color: green;}
#clear{background-color: gray;}
#btns {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<canvas width="700" height="700"></canvas>
<div id="btns">
<button id="clear">지우기</button>
<button id="img">이미지</button>
<button id="red" onclick="click_red()">red</button>
<button id="blue" onclick="click_blue()">blue</button>
<button id="pink" onclick="click_pink()">pink</button>
<button id="black" onclick="click_black()">black</button>
</div>
<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
let drawing;
let brush = 'color';
let imgElem = new Image();
imgElem.src = "../shopping_쌤/imgs/logo.png";
// 버튼 지정
const btns = document.querySelector('#btns')
// const imgElem = new Image();
// imgElem.src = '../shopping_쌤/imgs/logo.png';
// function click_img() {
// }
// function clear() {
// ctx.clearRect(0, 0, 700, 700);
// }
function click_red() {
ctx.strokeStyle = 'red';
}
function click_blue() {
ctx.strokeStyle = 'blue';
}
function click_pink() {
ctx.strokeStyle = 'pink';
}
function click_black() {
ctx.strokeStyle = 'black';
}
canvas.addEventListener('mousemove', draw); // 마우스 움직일 때 그려라
canvas.addEventListener('mousemove', function(e) {
console.log('마우스 움직임');
console.log(`x좌표 ${e.pageX}, y좌표 ${e.pageY}`);
})
canvas.addEventListener('mousedown', function() {
console.log('마우스 클릭');
drawing = true;
})
canvas.addEventListener('mouseup', function() {
console.log('마우스를 뗐다');
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 = 20; // 선 두께 지정
ctx.lineCap = "round" // 선 끝부분 지정
let x = e.pageX; // 좌표 받아오기
let y = e.pageY;
if(!drawing) return; // 함수는 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>
