Vẽ một vòng tròn trên vải bằng sự kiện chuột

Question

Tôi cố gắng để vẽ một vòng tròn sử dụng chuột trên vải bằng sự kiện chuột, nhưng nó không rút ra bất cứ điều gì:

tools.circle = function() { 
var tool = this; 
this.started = false; 
this.mousedown = function (ev) { 
tool.started = true; 
tool.x0 = ev._x; 
tool.y0 = ev._y; 
ctx.moveTo(tool.x0,tool.y0); 
}; 

this.mousemove = function (ev) { 
var centerX = Math.max(tool.x0,ev._x) - Math.abs(tool.x0 - ev._x)/2; 
var centerY = Math.max(tool.y0,ev._y) - Math.abs(tool.y0 - ev._y)/2; 
var distance = Math.sqrt(Math.pow(tool.x0 - ev._x,2) + Math.pow(tool.y0 - ev._y)); 
context.circle(tool.x0, tool.y0, distance/2,0,Math.PI*2 ,true); 
context.stroke(); 
}; 
}; 

Tôi đang làm gì sai?

Answer 1

Vâng, đoạn mã này không cho chúng tôi biết nhiều, nhưng có một vài lỗi rõ ràng trong mã của bạn. Đầu tiên, đối tượng Sự kiện DOM không có thuộc tính _ x và _ y. nhưng thay vì clientX và clientY hoặc pageX và pageY. chuột Để có được tương phối từ các đối tượng sự kiện hiện tại, bạn sẽ làm điều gì đó như:

element.onclick = function(e) { 
    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 
} 

Tiếp theo, bối cảnh 2d vải không có một phương pháp gọi là circle, nhưng bạn có thể viết riêng, có lẽ một cái gì đó của bạn như :

var ctx = canvas.context; 
ctx.fillCircle = function(x, y, radius, fillColor) { 
    this.fillStyle = fillColor; 
    this.beginPath(); 
    this.moveTo(x, y); 
    this.arc(x, y, radius, 0, Math.PI*2, false); 
    this.fill(); 
} 

Nhưng dù sao, đây là một trang kiểm tra html để kiểm tra này ra: http://jsfiddle.net/ArtBIT/kneDX/

tôi hy vọng điều này sẽ giúp. Chúc mừng