繪圖使用鼠標事件

我想提請使用鼠標使用鼠標事件畫布上的圓圈在畫布上轉了一圈，但它不畫任何東西：繪圖使用鼠標事件

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(); 
}; 
};

我在做什麼錯？

來源

2010-09-28 Nitesh

嗯，這段代碼並沒有告訴我們很多，但是在你的代碼中有幾個明顯的錯誤。首先，DOM事件對象不具有_ x和_ y屬性。而是clientX和clientY或pageX和pageY。要獲得相對鼠標從目前的事件對象的座標，你會做這樣的事情：

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

接下來，帆布2D背景的，沒有一個方法叫做circle，但你可以寫你自己的，可能像：

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(); 
}

總之，這是一個測試的HTML頁面來測試這一點：http://jsfiddle.net/ArtBIT/kneDX/

我希望這有助於。乾杯

來源

2010-10-04 23:00:26 ArtBIT

不正是我想要的，但也幫助我瞭解如何實現正是我想要使用圓 – Nitesh 2010-10-05 19:49:26

鼠標事件，你可以分享的鼠標事件的列表就像jSFiddele做，我們有onmouseover事件，難道我們有記錄的其他事件列表？ – 2013-11-12 23:55:14

@PKKG閱讀更多關於DOM事件（包括鼠標事件）的信息：http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents – ArtBIT 2013-11-13 11:28:12

繪圖使用鼠標事件

回答

相關問題