-
CANVAS 연습13_2(클릭한 곳에 사각형 그리기)게임/HTML 연습 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>결과:다른 곳은 정확한 결과가 나오는데 티스토리는....
클릭한 곳의 오른쪽에 결과가 나온다.
캔버스의 왼쪽을 클릭하세요...
반응형'게임 > HTML 연습' 카테고리의 다른 글
CANVAS 연습14_1(배경 움직이기 + 사람 그리기) (1) 2018.07.01 CANVAS 연습14(배경 움직이기) (0) 2018.07.01 CANVAS 연습13_1(사각형 이동 && 클릭시 멈춤) (0) 2018.06.29 CANVAS 연습13(사각형 이동) (0) 2018.06.29 CANVAS 연습12(이미지 합성) (0) 2018.06.29