百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

虚拟画笔

困难

人数14人在学习该课程,有5人已经完成该课程

时间平均用时0.6

关键词Webcanvas画笔

课程概述

作业提交截止时间:04-24

任务:虚拟画笔

欢迎加入商业平台学院QQ群38234781,获得与导师一对一的沟通机会

学院

  • 商业平台学院

导师

  • 高博

任务描述

  • 首先,我们需要能够响应鼠标的画布

    • 鼠标左键按下,相当于画笔落下
    • 鼠标左键抬起,相当于画笔抬起
    • 鼠标左键从按下到抬起,相当于一次用笔,用笔一次会在画布上留下某些痕迹
  • 第二,我们需要一把刷子

    • 在选择了刷子工具后,鼠标用笔一次,会在画布上留下类似刷子的痕迹
  • 第三,我们需要一个喷枪

    • 在选择喷枪工具后,鼠标用笔一次,可在一定范围内喷上墨迹
    • 在某片区域内多次喷洒后,这个区域的墨迹就会越来越浓重
    • 在某片区域内多次喷洒后,这个区域的墨迹就会越来越浓重
  • 第四,我们需要一块橡皮

    • 橡皮工具可以把某个区域擦成白色,也可以擦成指定颜色
    • 橡皮的形状可以定成矩形或者圆形
    • 橡皮的大小可以自由设计
  • 最后,我们需要切换这些功能的操作区域

    • 可以设计成图标按钮,也可以使用原生按钮,能切换功能就行

任务注意事项

  • 请提交工程在github的托管地址
  • 请尽量使用JS原生API开发,允许使用jQuery等简单框架
  • 请合理组织代码结构,添加必要的注释
  • 工程以index.html启动,第三方库放在dep文件夹中,项目代码放在src文件夹中
  • 如工程需要构建或特殊启动流程,请在readme.md中提供
学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~