게임/HTML 연습
CANVAS 연습13_2(클릭한 곳에 사각형 그리기)
런던전통손만두
2018. 6. 29. 14:43
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CANVAS 연습</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border: 1px dotted blue"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.canvas.addEventListener("click", function(event) {
var mouseX = event.clientX;
var mouseY = event.clientY;
ctx.fillStyle = "red";
ctx.fillRect(mouseX - 10, mouseY - 10, 20, 20);
})
</script>
</body>
</html>
결과:
다른 곳은 정확한 결과가 나오는데 티스토리는....
클릭한 곳의 오른쪽에 결과가 나온다.
캔버스의 왼쪽을 클릭하세요...
반응형