SegmentFault 技术周刊 Vol.20 - 用 Canvas 画个星空

SegmentFault 曾举办过一个社区官方的比赛「30 行 js 你能做出什么？」，产生了好些有意思的代码，大本钟、瀑布粒子、模拟 loading 等各种精巧的实现。

这期周刊主题，便是受此启发——你能用 Canvas 画布做出什么？有人用它来加工 HTML5 的特效，有人用它来制作城市地图，有人用它来做页面游戏，还有人用它来画日月江河。跟随本期周刊，把屏幕当做画板，来进入 Canvas 的世界！

<canvas id="introCanvas" width="825" height="74">
  here let's get to it!
</canvas>

学习

1. 了解什么是 Canvas

• Canvas 的基本原理 // 囧囧

• HTML5 中 Canvas 的使用总结 // 巅峰小词典

基础结构、坐标系、路径、图像及背景状态、像素操作……先了解 canvas 的基本原理。然后通过第二篇，将它的各种操作一一详细了解，知其然，且知其所以然。

• 绘图：路径、图形（矩形/圆形/扇形）、文本、色彩、阴影

• 图像处理方法：drawImage、getImageData / putImageData、toDataURL、save / restore

• 动画：坐标系获取

• 像素处理：蒙版、灰度、亮度、反转等

2. 上手第一步：画个圆

• Canvas 入门－利用 Canvas 制作一个七巧板 // Allin

• Canvas 入门－利用 Canvas 画国旗

先来画图形，三角形、正方形组成七巧板，圆形、坐标系定位画五角星，都是坐标计算。再来加特效，分分钟学会让图形跑起来。看看这三个，虽然都是轮子，但造的不错啊！

• Canvas 动画时钟 // masqli

• Canvas 仿芝麻信用分仪表盘

加特技使用

3. 上手第二步：尝试图片处理

结合 JavaScript，来做一些图片相关的基本的功能，比如

给图片加水印：

• Canvas 实现平铺水印 // yuqy

裁剪图片：

• Canvas 生成和合并图片 // 崔小拽

• HTML5 本地裁剪图片 // JellyBool

• 用 Canvas 实现 H5 移动端图片裁剪 // bless_l

绘制图片技巧：

• 利用 Canvas 将白色背景的 JPEG 图片转成透明的 PNG 图片 // zwhu

• Canvas 在高清屏下绘制图片变模糊的解决方法 // KevinYue

绘制复杂的图形：

• 利用 JavaScript 在 canvas 中画一棵树 // noiron

• 利用 JavaScript 生成一张随机的城市地图

4. 典型使用方式之动画

关于 Canvas 动画，这里要重点推荐 @我仍旧在这里 的专栏和独立博客，作者的专栏入选了「SegmentFault 2016 年度专栏」，《每周一点 Canvas 动画》系列写了很多惊艳的动画效果，推荐去订阅。

• 每周一点 Canvas 动画系列 - 序

• 用户交互

• 速度与加速度（2）

• 文字粒子

• 角度反弹

• 差分函数的妙用

其他一些值得推荐的动画实现：

• 使用 Canvas 实现交互性圆形马赛克效果 // 外籍杰克

• 一个有趣的 Android 加载动画 // 林海听涛

• Canvas 制作的下雨动画 // tinybear

• 用 Canvas 画一轮明月，夜空与流星 // ycwalker

5. 典型使用方式之开发个小游戏吧！

Canvas 做网页小游戏也倍受推崇。同样，先来看下该怎么做，下面这两篇文章精要简明地讲述 HTML5 游戏的开发知识储备。

• 译丨HTML5 游戏入门 // Fakefish

• 用 HTML5 开发一个小游戏 // JellyBool

然后，重点推荐 @fwon 的《从零开始开发一款 H5 小游戏》系列：五篇从基础场景到整个游戏的实现思路，让你对 H5 游戏开发有个宏观的了解，知道怎么入手。该系列文章对应游戏代码已开源：Sinuous game，赶快去 star 吧！

• （一）重温 Canvas 的基础用法

• （二）创造游戏世界，启动发条

• （三）攻守阵营，赋予粒子新的生命

• （四）撞击吧粒子，炫酷技能的实现

• （五）必要的包装，游戏规则和场景设计

最后，再来看看一个现成的方案，结合 Vue、ES6 快速简单地做一个游戏应用：

• Vue+WebSocket+ES6+Canvas 制作【你画我猜】小游戏 // jrainlau

推荐库

更多的 Canvas 高阶使用方法，可以再去探索，社区还有很多优秀的资料，比如 @hightopo 和 @MonoLog 的 HTML5 拓扑、3D 实现，非常优美，@musiq1989 在微信小程序中使用它来绘制图表，等等。

在最后，推荐给大家几个相关的库，增加使用时的便捷。

6. 附：相关的库

• 一个不到 1kb 的 image placeholder 的 js 库

• 开源造轮子：一个简洁，高效，轻量级，酷炫的不要不要的 Canvas 粒子运动插件库

• SphinxJS——把字符串编码成 png 图片的超轻量级开源库

（本期完）

---

# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列，一周一主题。周刊筛选的每篇内容，是作者的独到见解，踩坑总结和经验分享。

每周二更新，欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。