canvas 中常用的数学知识

本文主要是介绍canvas 中常用的数学知识，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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，直接找到对应教程，进入链接查看详细说明和示例。

第一章·基础知识

1. 两套width和height
2. canvas转图片
3. toBlob()转Blob
4. 绘图环境
5. 状态的保存和恢复
6. 支持IE6、IE7、IE8
7. 【项目】Canvas时钟
8. 鼠标事件
9. canvas.width和context.canvas.width
10. 【项目】精灵表坐标查看器
11. 键盘事件
12. 绘制表面的保存与恢复
13. 【项目】100个弹射小球
14. 【项目】橡皮筋选框局部放大器
15. 打印Canvas的内容
16. 数学知识:代数方程、三角函数、向量运算
17. 第一章-章末小结

第二章·绘制

1. Canvas绘制模型：canvas的浏览器渲染过程原理
2. 矩形的绘制
3. 颜色与透明度
4. 渐变色和图案
5. 阴影
6. 路径(path)、描边(stroke)与填充(fill)详细介绍
7. 剪纸效果/镂空效果
8. 线段、网格、像素边界
9. 坐标轴的绘制(带刻度线)
10. 【项目】画板——直线和矩形选区的实现
11. 虚线和蚂蚁线
12. CanvasRenderingContext2D扩展新方法和新属性
13. 线段端点和连接点
14. 圆和圆弧
15. 【项目】画板——圆的实现
16. 【项目】数字刻度仪表盘
17. 【项目】网格线背景（可作为HTML模版来用）
18. 二次方贝塞尔曲线(复选框对勾和圆角三角形)
19. 三次方贝塞尔曲线
20. 多边形(三角形、矩形、五边形、六边形……)
21. 【项目】画板——多边形的实现
22. isPointInPath()判断在路径内。（实现拖拽小方块）
23. 【项目】画板——可编辑贝塞尔曲线
24. 坐标轴的平移(translate)、缩放(scale)、旋转(totate)、镜像
25. 【项目】画板——交互式旋转多边形
26. 自定义坐标变换，transform()和setTransform()
27. 图像合成，globalCompositeOperation属性
28. 【项目】鼠标控制文字旋转缩放
29. 剪辑区域，使用clip()实现橡皮擦
30. 【项目】画板——橡皮擦工具
31. 任意圆角多边形
32. 第二章-章末小结

第三章·文本

1. 文本描边(strokeText)、填充(fillText)、阴影效果
2. 渐变文本、图案文本
3. font及相关属性(font-style、font-variant、font-weight、font-size、line-height、font-family)
4. font的水平对齐textAlign和垂直对齐textBaseline
5. 文本宽度的度量measureText()
6. 【项目】给坐标轴添加数字标签
7. 【项目】环形文字
8. 第三章-章末小结

第四章·图像与视频

1. 将图像和视频帧绘制到canvas中
2. 图片缩放到canvas大小

原文链接： https://codechina.csdn.net/mirrors/827652549/canvasstudy?utm_source=csdn_github_accelerator

这篇关于canvas 中常用的数学知识的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---