-
210929_jquery,canvas(그림판)JavaScript 2021. 9. 29. 17:19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#can{
border: 10px solid gold;
cursor: crosshair;
}
#clr{
margin-left: 300px;
}
#clr div{
width: 30px;
height: 30px;
cursor: pointer;
float: left;
margin-left: 3px;
}
#clear,#eraser{
text-decoration: none;
width: 130px;
height: 40px;
border: 2px solid green;
border-radius: 50px;
float: left;
line-height: 40px;
text-align: center;
cursor: pointer;
margin-left: 20px;
box-shadow: 5px 5px 3px gray;
font-weight: bold;
}
</style>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
window.onload=function(){
var can=document.getElementById("can");
var ctx=can.getContext("2d");
var preX,preY; //선그릴때 현재 좌표 저장할 변수
var draw=false; //나중에 마우스 클릭하고 그럴때만 그릴 수 있을 때
ctx.strokeStyle="black";
ctx.lineCap="round";
var idx=1;
//이벤트
can.onmousedown=function(e){
console.log("onmousedown");
draw=true;
//클릭한 곳에서 선이 시작..x,y좌표 저장
preX=e.pageX; //pageX 현재 마우스 위치
preY=e.pageY;
}
can.onmousemove=function(e){
console.log("onmousemove");
console.log(e.pageX,e.pageY);
if (draw==true) {
if(idx==1)
{
ctx.beginPath();
ctx.lineWidth=2;
ctx.moveTo(preX, preY); //직전좌표로 이동
ctx.lineTo(e.pageX, e.pageY); //직전좌표부터 현재좌표까지 선 그리기
ctx.stroke();
ctx.closePath();
} else if (idx==2) {
ctx.fillRect(e.pageX, e.pageY, 50, 50);
}
//현재좌표 다시 저장
preX=e.pageX;
preY=e.pageY;
}
}
//마우스를 떼면 안 그려지게
can.onmouseup=function(){
draw=false;
}
//화면초기화
document.getElementById("clear").onclick=function(){
ctx.fillStyle="#ffffff"; //흰색
ctx.fillRect(0, 0, can.width, can.height); //캔버스 전체
}
//선색 변경
//제이쿼리 이벤트 미리 맛보기
$("#clr>div").click(function() {
idx=1;
//현재 div태그의 배경색 속성값을 얻어서 선색 변경하기
ctx.strokeStyle=$(this).css("background-color");
//지우개
$("#eraser").click(function() {
idx=2;
ctx.strokeStyle="#ffffff";
ctx.fillStyle="#ffffff";
})
});
}
</script>
</head>
<body>
<h2>Canvas를 이용한 간단 그림판</h2>
<canvas id="can" width="1000" height="500"></canvas>
<div id="clr">
<div style="background-color: #ffc0cb"></div>
<div style="background-color: #add8e6"></div>
<div style="background-color: #fffacd"></div>
<div style="background-color: #ffa07a"></div>
<div style="background-color: #20b2aa"></div>
<div style="background-color: #dda0dd"></div>
<div style="background-color: #deb887"></div>
<div style="background-color: #c0c0c0"></div>
<div style="background-color: #bdb76b"></div>
</div>
<div id="clear">화면초기화</div>
<div id="eraser">지우개</div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
210929_select,image,radio (0) 2021.09.29 210929_canvas (0) 2021.09.29 210929_calendar (0) 2021.09.29 210929_form,setInterval (0) 2021.09.29 210928_image,onkeyup(위치변경) (0) 2021.09.28