原生JS做一个画板

知识点

鼠标的事件
  • onmousedown()鼠标按下
  • onmousemove()鼠标移动
  • onmouseup()鼠标弹起
触屏设备事件
  • ontouchstart触碰
  • ontouchmove触摸并移动
  • ontouchend不触碰
制作思路
  1. 画一个canvas出来
  2. 定义监听函数,在函数内定义鼠标以及触屏事件,实现可以划线
  3. 在阿里矢量图库寻找适合图标,放入画布
  4. 为对应图标添加onclick事件,点击后加入对应class名字
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 事件流 Click Me 冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标的顺序触发。触发的顺序是:di...
    醋留香阅读 995评论 0赞 1
  • 1.功能描述 实现画画功能,并可切换画笔颜色、细条粗细。可保存、清空画板。 2.思路 创建画板——》监听鼠标(触屏...
    雄霸是也阅读 436评论 0赞 0
  • 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http:...
    狼之独步阅读 3,308评论 0赞 2
  • 一、实现思路 (非触屏设备) 监听鼠标事件①按下鼠标:onmousedown;滑动鼠标:onmousemove;松...
    darkTi阅读 1,288评论 0赞 1
  • 前端学习笔记の拖拽(一)# 源码地址:https://github.com/WZOnePiece/study-dr...
    迷缘火叶阅读 2,856评论 0赞 8

友情链接更多精彩内容