鍍金池/ 問(wèn)答/HTML5  HTML/ canvas鼠標(biāo)拖動(dòng)在上面畫矩形框的問(wèn)題

canvas鼠標(biāo)拖動(dòng)在上面畫矩形框的問(wèn)題

我想讓鼠標(biāo)拖動(dòng)實(shí)時(shí)顯示矩形框的大小變化，利用onmousedown、onmousemove、onmouseup這三個(gè)事件來(lái)做。

請(qǐng)問(wèn)在onmousemove里怎么處理才不會(huì)出現(xiàn)鼠標(biāo)在拖動(dòng)的時(shí)候把上一次矩形框也顯示出來(lái)
document.onmousemove=function(e) {

ctx.strokeRect(參數(shù)...);

}
如果是這么寫的話，鼠標(biāo)一拖動(dòng)就會(huì)顯示很多框框。要是是用清除功能的話，就會(huì)把之前畫好的也給清除掉了

回答
編輯回答
疚幼

兩個(gè)畫布就是樓上說(shuō)的.
一個(gè)畫布,你就把鼠標(biāo)抬起時(shí)那個(gè)好好的存到一個(gè)數(shù)組里,每次鼠標(biāo)事件之前把那個(gè)數(shù)組里的遍歷畫一次.

2018年8月23日 14:09
編輯回答
別逞強(qiáng)

目前我想到了兩種方法：

  1. 對(duì)于之前繪制好的圖像，進(jìn)行坐標(biāo)的存儲(chǔ)。每次繪制之前，將畫板清空，繪制出存儲(chǔ)的圖形坐標(biāo)。
  2. 可以將兩個(gè) canvas 圖層疊加，（姑且稱為顯示層，臨時(shí)層）。mousedown，mouseup，mousemove 都由臨時(shí)層監(jiān)聽。其中 mousedown，mouseup 監(jiān)聽的時(shí)候?qū)︼@示層也進(jìn)行繪制，每次只清除臨時(shí)層。記得把臨時(shí)層放到顯示層的上面。
2017年5月16日 06:23