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

巨型画布

困难

人数106人在学习该课程,有18人已经完成该课程

时间平均用时1.9

关键词Webcanvas画布巨型

课程概述

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

任务描述

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

  • 首先,我们需要一个巨型画布
    • 这个画布不是大,而是巨大。它所支持的图片分辨率应当达到19200 x 10800。
    • 我们不希望看到一个尺寸巨大的canvas容器,将整个图片显示出来。
    • 呈现给用户的画布尺寸,最大分辨率是1024 x 768,画布只显示图片的一部分(暂时不考虑图片缩放显示)。
  • 其次,我们希望这个画布支持拖拽
    • 画布只能显示图片的一部分,我们希望通过鼠标在画布上的拖动,查看图片的其他部分。
    • 为了不影响运行效率,鼠标拖拽的过程中,可以不做效果处理,只在鼠标抬起后,给出交互结果。
  • 第三,我们需要一个缩略图
    • 画布只能显示图片的一部分,我们希望在画布旁边,有一个小图,能显示整张图片。
    • 我们希望缩略图上有一个框,框出当前画布所显示的图片区域。当然,用户在画布上拖拽时,这个框要随之移动。
  • 第四,这个画布应当是可编辑的
    • 你可以自行设计一些编辑项目,比如鼠标点击时,在鼠标点击位置绘制一个圆点。
  • 第五,请在demo中给出一张图片
    • 这张图片可以以任何形式给出,动用你的想象力。

任务注意事项

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

暂无优秀学习笔记~