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

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

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

学习

1. 了解什么是 Canvas

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

  • 绘图:路径、图形(矩形/圆形/扇形)、文本、色彩、阴影

  • 图像处理方法:drawImagegetImageData / putImageDatatoDataURLsave / restore

  • 动画:坐标系获取

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

2. 上手第一步:画个圆

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

加特技使用

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

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

给图片加水印:

裁剪图片:

绘制图片技巧:

绘制复杂的图形:

4. 典型使用方式之动画

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

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

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

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

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

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

推荐库

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

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

6. 附:相关的库

(本期完)


# SegmentFault 技术周刊 #

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

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

如果觉得我的文章对你有用,请随意赞赏

fordream001 · 1月12日

学习了

回复

ha_jojo · 2月10日

好厉害,学习中

回复

载入中...
Noodles Noodles

12.9k 声望

发布于专栏

SegmentFault 社区周刊

主题技术周刊,每周大不同。 - SegmentFault 社评

785 人关注