html5 및 javacript를 사용하여 마우스 클릭 이벤트에서 이미지를 만드는 방법

Question

나는 html5에서 초보자이며 click 이벤트에서 이미지처럼 도트를 만들고 싶습니다. 나는 문맥을 사용하려고 노력하지만 불행하게도 일하지 않습니다. 내가 사용하고있는 코드는

document.addEventListener("DOMContentLoaded", init, false); 

     function init() 
     { 
     var canvas = document.getElementById("options"); 
     canvas.addEventListener("mousedown", getPosition, false); 
     } 

     function getPosition(event) 
     { 
     var x = new Number(); 
     var y = new Number(); 
     var canvas = document.getElementById("options"); 

     if (event.x != undefined && event.y != undefined) 
     { 
      x = event.x; 
      y = event.y; 
     } 
     else // Firefox method to get the position 
     { 
      x = event.clientX + document.body.scrollLeft + 
       document.documentElement.scrollLeft; 
      y = event.clientY + document.body.scrollTop + 
       document.documentElement.scrollTop; 
     } 

     x -= canvas.offsetLeft; 
     y -= canvas.offsetTop; 

     alert("x: " + x + " y: " + y); 
      var b_canvas = document.getElementById("b"); 
    var b_context = b_canvas.getContext("2d"); 
    b_context.fillRect(50, 25, 150, 100); 

내가 실수하고있는 곳을 제안 해주세요.

Answer 1

그게 문제지만, 캔버스에 점을 그리는 경우 확실하지, 당신은 RAD (2pi 0 RAD에서) 완전히 폐쇄 호를 그리, 경로를 시작할 수 있습니다 귀하의 제안을주고 그 입력 :

 b_context.beginPath(); 
    b_context.arc(x, y, 5 , 0, 2 * Math.PI,true); 
    b_context.fillStyle = "blue"; 
    b_context.fill(); 

을

또한 너비와 높이를 캔버스에 직접 설정하고 CSS가 아닌 왜곡을 방지하는 것이 중요합니다. (방금 나 자신을 발견했다.)) 완전한 예제 바이올린 : http://jsfiddle.net/wHsMJ/ (오른쪽의 사각형을 클릭하여 테스트하십시오)