成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【題目】【8天】canvas畫板

Xufc / 609人閱讀

摘要：和監(jiān)聽用戶是否在繪畫。再繪畫不在繪畫。監(jiān)測用戶是在使用橡皮檫，是在使用橡皮擦，停止使用鉛筆。使用，會(huì)變?yōu)槭褂茫竺鏁?huì)增加一個(gè)屬性值。的作用是獲取寬度也就是寬度移動(dòng)端支持多點(diǎn)觸控，所以要獲取需要加上，表示第一個(gè)值

canvas畫板，比較簡易，目前還有很多bug
1、手機(jī)端上下會(huì)晃動(dòng)
2、下載按鈕微信上沒法用
3、下載后背景色是透明
4、切換成橡皮擦后，需要先點(diǎn)鉛筆才能繪畫，不能直接點(diǎn)顏色




    
    Title
    
    


        
        

            
            
            
            
            
            
        

        
    
            
  1. 
            
  2. 
            
  3. 
            
  4.

JS代碼

總結(jié)：
1、按下鼠標(biāo)和移動(dòng)鼠標(biāo)后它們中間會(huì)有空隙，解決方法：用線連接鼠標(biāo)移動(dòng)前后的兩點(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，在移動(dòng)端是null，只要不等于undefined就可以確定是移動(dòng)端。
5、狀態(tài)切換，不直接修改css里面內(nèi)容，通過js切換class來實(shí)現(xiàn)狀態(tài)切換。比如：上面橡皮擦和鉛筆的切換。
6、使用x.className = "active"，class會(huì)變?yōu)?b>active；使用x.classList.add("active")，class后面會(huì)增加一個(gè)屬性值active。
7、document.documentElement.clientWidth的作用是獲取document寬度（也就是viewport寬度）
8、移動(dòng)端支持多點(diǎn)觸控，所以要獲取clientX需要加上touches[0]，表示touch第一個(gè)值

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94902.html

相關(guān)文章

  • Day08 - HTML5 Canvas 實(shí)現(xiàn)彩虹畫筆繪畫板指南

    摘要：實(shí)現(xiàn)彩虹畫筆繪畫板指南作者簡介是推出的一個(gè)天挑戰(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 推出的一個(gè) 30 天挑...

    Ajian 評(píng)論0 收藏0

  • 使用Canvas和JavaScript做一個(gè)畫板

    摘要：本文同步于個(gè)人博客前些天學(xué)習(xí)了的元素，今天就來實(shí)踐一下，用做一個(gè)畫板。實(shí)現(xiàn)一個(gè)簡單的畫板實(shí)現(xiàn)思路監(jiān)聽鼠標(biāo)事件，用方法把記錄的數(shù)據(jù)畫出來。為時(shí)，移動(dòng)鼠標(biāo)使用剪裁擦除畫布。 本文同步于個(gè)人博客：https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天學(xué)習(xí)了HTML5的元素，今天就來實(shí)踐一下，用canvas做一個(gè)畫板。 showImg(ht...

    asce1885 評(píng)論0 收藏0

  • canvas 簡易像素畫板

    摘要：個(gè)人博客庫下載大致思路自己畫隨機(jī)傳入對(duì)象和參數(shù)可不傳參數(shù)背景色默認(rèn)填充色默認(rèn)方塊大小默認(rèn)方法清除所有方塊隨機(jī)生成多少個(gè)方塊增加鼠標(biāo)點(diǎn)擊移動(dòng)繪畫實(shí)例庫使用 個(gè)人博客 http://taoquns.com/paper/59ba...github https://github.com/Taoqun/can...download 庫 下載canvas.toDataURL https://gi...

    UnixAgain 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<