鍍金池/ 問答/HTML5  HTML/ canvas橡皮擦

canvas橡皮擦

請(qǐng)問下我在用canvas繪圖的時(shí)候
首先繪制了一個(gè)背景圖,然后在背景圖上畫線條,然后想用橡皮擦擦去線條但是保留背景圖該咋整呢

case 'touchmove':
            var loc = window2Canvas(canvas, touched.clientX, touched.clientY)
            w = loc.x
            h = loc.y
            if (arr.length != 0) {
              // 如果沒有這句話,橡皮擦可以連續(xù)執(zhí)行,有了就是斷斷續(xù)續(xù)執(zhí)行
              obj.putImageData(arr[arr.length - 1], 0, 0, 0, 0, width, height);
            }
            if (dType === 'pen') {
              draw.pen(x, y, w, h)
            } else if (dType === 'eraser') {
              draw.lineCap = 'round'
              draw.clearRect(w - 5, h - 5, 10, 10)
            }
            break

現(xiàn)在就有這么個(gè)問題,就是執(zhí)行了putImageData之后,再執(zhí)行clearRect方法就是斷斷續(xù)續(xù)的

回答
編輯回答
無標(biāo)題

這個(gè)可能需要用到多個(gè)層的概念。你背景是一層,然后有一層是你繪圖對(duì)應(yīng)的層,然后兩個(gè)再混合顯示,你所有的操作實(shí)際上只對(duì)繪圖層。
這里需要注意的是你表面是在混合后的層在操作,但實(shí)際上你僅僅是在上面獲取交互信息,然后去處理繪圖層,最后再混合出來展示,這一點(diǎn)必須吃透,否則就會(huì)出錯(cuò)。
你之所以出現(xiàn)問題估計(jì)也是類似操作沒有吃透,變成了在混合后的層直接操作了。

2017年4月2日 12:38