原生JS做一個(gè)畫板

知識(shí)點(diǎn)

鼠標(biāo)的事件
  • onmousedown()鼠標(biāo)按下
  • onmousemove()鼠標(biāo)移動(dòng)
  • onmouseup()鼠標(biāo)彈起
觸屏設(shè)備事件
  • ontouchstart觸碰
  • ontouchmove觸摸并移動(dòng)
  • ontouchend不觸碰
制作思路
  1. 畫一個(gè)canvas出來
  2. 定義監(jiān)聽函數(shù)，在函數(shù)內(nèi)定義鼠標(biāo)以及觸屏事件，實(shí)現(xiàn)可以劃線
  3. 在阿里矢量圖庫尋找適合圖標(biāo)，放入畫布
  4. 為對(duì)應(yīng)圖標(biāo)添加onclick事件，點(diǎn)擊后加入對(duì)應(yīng)class名字
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 事件流 Click Me 冒泡型事件：事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)的順序觸發(fā)。觸發(fā)的順序是：di...
    醋留香閱讀 967評(píng)論 0贊 1
  • 1.功能描述 實(shí)現(xiàn)畫畫功能，并可切換畫筆顏色、細(xì)條粗細(xì)?？杀４?、清空畫板。 2.思路 創(chuàng)建畫板——》監(jiān)聽鼠標(biāo)（觸屏...
    雄霸是也閱讀 427評(píng)論 0贊 0
  • 原創(chuàng)作品，允許轉(zhuǎn)載，轉(zhuǎn)載時(shí)請(qǐng)務(wù)必以超鏈接形式標(biāo)明文章 原始出處 、作者信息和本聲明。否則將追究法律責(zé)任。http:...
    狼之獨(dú)步閱讀 3,287評(píng)論 0贊 2
  • 一、實(shí)現(xiàn)思路 （非觸屏設(shè)備） 監(jiān)聽鼠標(biāo)事件①按下鼠標(biāo)：onmousedown；滑動(dòng)鼠標(biāo)：onmousemove；松...
    darkTi閱讀 1,266評(píng)論 0贊 1
  • 前端學(xué)習(xí)筆記の拖拽（一）# 源碼地址：https://github.com/WZOnePiece/study-dr...
    迷緣火葉閱讀 2,837評(píng)論 0贊 8

友情鏈接更多精彩內(nèi)容