介绍 Introduction
这是一个利用 canvas 技术的互动相册，其中共有 12 组照片。用手涂抹旧照片会显示出新照片，此外还有可能触发一些“信息点”提示。
You can see this as an interactive album with canvas technology, in which the scene in a same place changes over time by wiping it with your finger, and stories hid behind specific positions in the photo may pop up.
该页面上线后，通过校友的微信朋友圈自发传播，截至 2017 年 5 月已获得近 5000 次点击，完整体验次数达 1000 余次，留言 72 条。
I put 12 couples of photos in the album. After sharing the webpage on the social media, ~5000 page views and 1000+ full journeys have been made to date (May 2017), while 72 comments with thoughts about the high school in the album are left.
网页地址 See in action
https://seethediff.cn/fjzs2017/
技术特性 Technical Features
自行优化的 canvas 操作，利用与浏览器同步绘制等技巧，保证触摸画图基本无卡顿。
Optimization on canvas drawing, such as synchronized painting with the browser, makes the interaction run smoothly.
以节省流量为本，JavaScript 只使用现代浏览器支持的接口，不使用大型的程序库（对的，只用了原生），首屏总流量 80 KB（之后只加载图片素材）。
Crafted with least data-consumption goal in mind. Only JavaScript API working on modern browsers is used, so that everything is vanilla and no poly-fill library is required, making first-screen page size on mobile phones within 80 KB (afterwards only images are downloaded).
基于又拍云 CDN 的实时切图、转换图片格式功能，大大降低对流量的消耗（在支持 WebP 的手机浏览器上包含若干信息点放大的 24 张图片总花费流量约 5 MB）。
Thanks to image cropping and reformatting on-the-fly by UPYUN CDN, data consumption drops significantly (on WebP-supported mobile browsers, 24 color images with info points zooming pieces only cost about 5 MB).
完整的响应式设计，利用 JS 与 CSS 混合排版，在所有尺寸、所有朝向的屏幕上均尽量保证最佳体验，且适配高分屏等需要提高图片分辨率的情况。
Full responsive design ensures best possible experience on screens in any size or direction, in which JavaScript and CSS are both involved. Retina display for images is also supported.
对打印样式进行优化，用户可直接打印保存画布创作成果。
A special printing style enables user print what he have created on the canvas.
对键盘操作进行优化，主要操作可以全程使用键盘进行，且不需使用 Tab 键
Main user interactions can be done by keyboards alone, and no Tab pressing is required, after related optimizations.
设想 Future
网页中的组件未来可以复用，用于制作其他网页。网页也可在类似展览室的触摸屏上，实现互动。
The modules written for this webpage can be reused for other projects. The webpage can not only run on personal devices, but also run on large touch screens as an exhibition item.
网页的互动元素仍比较多，如要让更多的人介绍，可能需要进一步简化主线的互动操作。此外在传播初期，由于互动操作与 iOS 系统的网页退出操作有冲突，使得部分用户的使用体验较差，这一糟糕的印象可能已经难以挽回。
Currently the interaction is somewhat complex, compared to other webpages made for the high school's yearly celebration, which needs to be clipped for better spreading. What's more, in initial versions one of the swipe-right actions conflicts with iOS's default return gesture. Owing to the bad experience it caused, it may be hard to win back some people's interest.
这一网页目前对内链处理还不够好，应当增加跳转到具体某一组图片的地址。
Now the webpage does bad in interlinking. Anchor links for images may be implemented.
更多文章 More Blogs (Chinese only)
- 分享一些打磨单页网页的经验（技术篇）
- 分享飞逝金中那个页面最近的运营数据（运营篇）