CanvasStudy

关于Canvas（About Canvas）

Canvas API 提供了一个通过JavaScript和HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API主要聚焦于2D图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。

Canvas可操作的层面是像素级别的，你觉得还有什么它做不到吗？

介绍（Introduce）

本教程是一套详细介绍Canvas的系列学习教程同时也是查阅工具，以实例为主，采用由泛到精的学习结构，所有的小节都有单独的教程页面和HTML文件。

如果你想直接开始学习，请直接下拉到目录区。

注意：该教程并未完结，以下是正式版的README说明。

现在，所有教程的讲解均在CSDN博客里书写，以Github Pages在线演示（你可能需要翻墙）。

未来，会将所有的教程搬运到一个专门的网站供访问和探讨。

适用人群(For people)

如果你是想系统性地学习Canvas，那么该教程适合你，它拥有全套的Canvas细节介绍。
如果你想要进一步Canvas某一个特性，那么此教程适合你，它涵盖了Canvas所有的特性。
如果你在开发Canvas中遇到了某个bug，那么此教程适合你，它针对于每个特性都有相应的在线示例。

预备知识（Knowledge）

你最好能熟练运用HTML、JavaScript与CSS技术，举例来说，假设你已经知道如何使用JavaScript语言的原型继承实现一个对象。

另外也需要你具备一些基本的数学知识，注如基本的代数运算、三角函数、向量数学以及计量单位的换算。在第一章的末尾，你能找到涵盖上述基础数学知识的讲解。

当然，如果你保持一颗积极向上的心，你也可以边学习Canvas边补充你的预备知识技能。因为，这并不难，不是吗？

创作背景（Creative Background）

在浏览了国内主要的Canvas系列讲解后，发现对于Canvas的教程是不健全的，除此之外，那些更适合作为一个查阅工具，而不是适合系统学习。为了让更多的人学习和使用Canvas，我决定出一篇Canvas教程当作自己的处女座，写作的过程中会有不成熟的地方，希望能得到大家的指正和批评。

我以《HTML5 Canvas核心技术(图形、动画与游戏开发)》机械工业出版社为Canvas系列教程的核心参考资料，另外在某些书中没有说明白的，再引用其他平台如MDN来补充和总结。

在这里感谢David Geary创作这本书，感谢爱飞翔翻译。

为了让所有人都能理解，我尽量精简我的语言和措辞，在阅读完第一章之后，我发现其实这本书还是有很多可以精简和“通俗化”的语句的，于是我就直接总结到我的教程之中。

目前本仓库仍在更新中，相应的Demo演示直接打开对应html文件即可。

每个文件都在我都CSDN博客专栏中对应都有教程文章 Canvas系列教程。

在之后都更新中，会将所有的演示Demo的在线链接和说明都贴到README中方便大家使用。

教程目录（Contents）

如果你打算系统性学习Canvas，推荐您按照顺序学习，在一定程度上能够节省您的时间。
如果你是要了解某个特性或定位BUG，直接找到对应教程，进入链接查看详细说明和示例。

第一章·基础知识

第二章·绘制

第三章·文本

第四章·图像与视频

另外（Additional）

在教程之中，我省略了一部分方法的参数介绍，因为你能很容易在网上找到更权威的参数说明，便不再过多解释。

更新顺序会按照章节顺序更新，更新仍在继续，请保持关注和支持。

联系（Contact）

欢迎联系我提建议。

作者：苏一恒
Email：827652549@qq.com
QQ：827652549
QQ群：865327862，在这里我们共同探讨关于Canvas的有趣技术、感谢支持。

欢迎修订（Join me）

如果您对代码中的细节有更合适的修改，欢迎和我一起完善这套教程。

感谢所有人关注和支持的人，欢迎手动点star。

本教程的完善计划（Doing）

因为该教程是本人的处女作，所以会有很多不完善的地方，希望大家体谅。我虽然能在写作中完善，但是在不断地学习“如果写一篇好教程”的过程中，不能总是折返修改之前的文章，这样会带来太多的时间成本的浪费。

我希望在能尽量减少浪费时间成本的情况下，一步步将本教程完善起来。

于是我决定分阶段不断地完善该教程。

第一阶段：创作文章的内容。以CSDN博客为文章载体，以Github Pages为在线演示载体，通过链接跳转，达到教程“容易理解”的目的。
第二阶段：统一每篇教程的格式，修正所有的链接。例如在前面某些章节中，关于代码的说明有的是直接引入的代码块，有的是链接到Github中；目录有的有，有的没有……
第三阶段：将教程移植到个人网站，专门服务该教程。太依托CSDN对于教程的推广，移植到个人网站后，便能够统一化管理，建立各级目录和锚点，在线演示等等都变得方便起来。总的来说，就是让读者更容易学习Canvas这门技术。
第四阶段：精炼教程，推敲文字，使之更易学习和专业。在创作初期，受我本人的语言表达能力影响，有些措辞可以更加精确，这就需要下点功夫去修改那些措辞，以追求高质量教程。
第五阶段：紧跟Canvas标准，添加新特性相关教程。这个时代，HTML5的标准是Living Standard，来自WAHTWG，所以要不断地紧跟潮流，推陈出新，以更加完备的姿态去面临未来的挑战。

License

827652549/CanvasStudy

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages