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

分层画布

困难

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

时间平均用时0.7

关键词Webcanvas画布分层

课程概述

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

任务描述

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

  • 首先,我们需要能够响应鼠标的画布
    • 鼠标左键按下,相当于画笔落下
    • 鼠标左键抬起,相当于画笔抬起
    • 鼠标左键从按下到抬起,相当于一次用笔,用笔一次会在画布上留下一条折线,或什么都不留下
  • 然后,我们需要能够分层的画布
    • 每用笔一次,相当与在画布上创建了一个透明的层
    • 如果一次用笔什么都没留下,则不创建层,也就是说,在画布上单击鼠标,不会创建新层
    • 后创建的层,浮在画布的最上面,遮挡住先创建的层,但由于层是透明的,可以看到所有的用笔
  • 第三,我们希望可以设置画布的背景色

    • 设置了画布背景色后,画布的背景变为相应颜色
    • 如果将画布设置成透明,画布背景显示成灰白相间的网格:

  • 第四,我们需要一个针对层的操作栏

    • 操作栏可以改变层的上下顺序,从而改变折线的遮挡关系
    • 操作栏可以显示隐藏层
    • 操作栏可以删除层

任务注意事项

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

暂无优秀学习笔记~