在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

canvas橡皮擦

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

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)在就有這么個問題,就是執(zhí)行了putImageData之后,再執(zhí)行clearRect方法就是斷斷續(xù)續(xù)的

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

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

2017年4月2日 12:38