資訊專欄INFORMATION COLUMN
摘要：和監(jiān)聽用戶是否在繪畫。再繪畫不在繪畫。監(jiān)測用戶是在使用橡皮檫，是在使用橡皮擦，停止使用鉛筆。使用，會變?yōu)槭褂茫竺鏁黾右粋€屬性值。的作用是獲取寬度也就是寬度移動端支持多點(diǎn)觸控，所以要獲取需要加上，表示第一個值
canvas畫板，比較簡易，目前還有很多bug
1、手機(jī)端上下會晃動
2、下載按鈕微信上沒法用
3、下載后背景色是透明
4、切換成橡皮擦后，需要先點(diǎn)鉛筆才能繪畫，不能直接點(diǎn)顏色
Title
JS代碼
總結(jié)：
1、按下鼠標(biāo)和移動鼠標(biāo)后它們中間會有空隙，解決方法：用線連接鼠標(biāo)移動前后的兩點(diǎn)。lasePoint和newPoint
2、painting = false監(jiān)聽用戶是否在繪畫。true再繪畫false不在繪畫。
3、eraserEnable = false;監(jiān)測用戶是在使用橡皮檫，true是在使用橡皮擦，停止使用鉛筆。
4、判斷用戶是使用pc還是手機(jī)，需要監(jiān)測是否有touch事件，如果有，首先使用touch事件；在pc端document.body.ontouchstart === undefined，在移動端是null，只要不等于undefined就可以確定是移動端。
5、狀態(tài)切換，不直接修改css里面內(nèi)容，通過js切換class來實(shí)現(xiàn)狀態(tài)切換。比如：上面橡皮擦和鉛筆的切換。
6、使用x.className = "active"，class會變?yōu)?b>active；使用x.classList.add("active")，class后面會增加一個屬性值active。
7、document.documentElement.clientWidth的作用是獲取document寬度（也就是viewport寬度）
8、移動端支持多點(diǎn)觸控，所以要獲取clientX需要加上touches[0]，表示touch第一個值
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94902.html
摘要：實(shí)現(xiàn)彩虹畫筆繪畫板指南作者簡介是推出的一個天挑戰(zhàn)。這部分不涉及內(nèi)容，全部由來實(shí)現(xiàn)。實(shí)現(xiàn)彩虹畫筆繪畫板效果圖項(xiàng)目源碼分析源碼獲取節(jié)點(diǎn)支持不支持彩虹效控制筆觸大小控制繪制路徑源碼分析寬高設(shè)置屬性筆觸的形狀，有圓平方三種。 Day08 - HTML5 Canvas 實(shí)現(xiàn)彩虹畫筆繪畫板指南 作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑...
摘要：本文同步于個人博客前些天學(xué)習(xí)了的元素，今天就來實(shí)踐一下，用做一個畫板。實(shí)現(xiàn)一個簡單的畫板實(shí)現(xiàn)思路監(jiān)聽鼠標(biāo)事件，用方法把記錄的數(shù)據(jù)畫出來。為時，移動鼠標(biāo)使用剪裁擦除畫布。 本文同步于個人博客：https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天學(xué)習(xí)了HTML5的元素，今天就來實(shí)踐一下，用canvas做一個畫板。 showImg(ht...
摘要：個人博客庫下載大致思路自己畫隨機(jī)傳入對象和參數(shù)可不傳參數(shù)背景色默認(rèn)填充色默認(rèn)方塊大小默認(rèn)方法清除所有方塊隨機(jī)生成多少個方塊增加鼠標(biāo)點(diǎn)擊移動繪畫實(shí)例庫使用 個人博客 http://taoquns.com/paper/59ba...github https://github.com/Taoqun/can...download 庫 下載canvas.toDataURL https://gi...
閱讀 1422·2021-10-08 10:05
閱讀 4234·2021-09-22 15:54
閱讀 3160·2021-08-27 16:18
閱讀 3159·2019-08-30 15:55
閱讀 1528·2019-08-29 12:54
閱讀 2805·2019-08-26 11:42
閱讀 634·2019-08-26 11:39
閱讀 2185·2019-08-26 10:11
