반응형
클릭한 곳에 사각형 생성하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
draw();
});
function draw() {
var ctx;
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
}
$(canvas).on("click", function (e) {
if (canvas.getContext) {
var l = $(this).offset().left;
var t = $(this).offset().top;
var x = e.pageX - l;
var y = e.pageY - t;
var w = 15;
var h = 15;
ctx.fillStyle = "rgb(255, 187, 0)";
ctx.fillRect(x, y, w, h);
}
})
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
canvas {
border: 1px solid black;
}
#canvas {
position: relative;
top: 150px;
left: 600px;
}
</style>
</head>
<body>
<canvas id="canvas" width="750" height="750"></canvas>
</body>
</html>canvas를 생성하고, 생성한 캔버스를 클릭하면 현재의 좌표를 받고 지정한 사이즈와 색상으로 사각형을 생성하는 예제입니다.
클릭한 곳에 동그라미 생성하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
draw();
});
function draw() {
var ctx;
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
}
$(canvas).on("click", function (e) {
if (canvas.getContext) {
var l = $(this).offset().left;
var t = $(this).offset().top;
var x = e.pageX - l;
var y = e.pageY - t;
var r = 5;
console.log("canvas click" + x + " " + y);
ctx.beginPath();
ctx.fillStyle = "rgb(54, 138, 255)";
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.fill();
}
})
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
canvas {
border: 1px solid black;
}
#canvas {
position: relative;
top: 150px;
left: 600px;
}
</style>
</head>
<body>
<canvas id="canvas" width="750" height="750"></canvas>
</body>
</html>사각형과 원리는 동일하며 생성하는 데이터각 사각형이 아닌 동그라미를 생성하고 그립니다.
반응형
'WEB > Canvas' 카테고리의 다른 글
| p5.js - 하트가 빙글빙글 돌면서 움직이는 예제(heart moving and rotates) (0) | 2021.02.19 |
|---|---|
| P5.js - 3D 도형 정육면체 제어하기 (0) | 2021.02.16 |
| P5.js - 시작하기 (0) | 2021.02.16 |
| Canvas - 캔버스를 활용한 사인창 만들기 (0) | 2020.07.21 |
| Canvas - 두개의 점 사이를 화살표 처리하기 (0) | 2020.07.16 |
