Canvas系列教程(从入门到精通)【详细解读】
关注
分享
扫一扫
更细致地学习Canvas技术，将每个Canvas知识点拆分出来，以代码、示例、讲解、说明、补充、使用场景等多方面进行阐述和说明。
以《HTML5 Canvas核心技术(图形、动画与游戏开发)》这本书为基础，创建的一个学习辅助专栏，所有相关知识点和思考点皆以该书为基础。
苏一恒
一个博主的自我修养：从扎实的基础到深入浅出，不要做知识的搬运工。
展开
-
【绘制】HTML5 Canvas 实现任意圆角多边形
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy文章目录介绍思路利用arc或arcTo实现圆角找到圆角起点的解析几何函数当用户输入异常值（redius大于边长的处理方案）介绍已知数组...原创 2020-04-23 10:51:22 · 2450 阅读 · 0 评论 -
【图像与视频】HTML5 Canvas 图像的缩放（自适应到canvas的大小）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍之前我们介绍了如何将一幅未经缩放的图像绘制到canvas中。现在我们试着用drawImage()在绘制图像的时候进行缩放。...原创 2019-10-29 20:47:05 · 3575 阅读 · 2 评论 -
【图像与视频】HTML5 Canvas 图像的绘制 drawImage()绘制图片或视频帧
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍HTML5 Canvas提供了极为丰富的图像支持。首先让我们从最简单的做起：“如何在Canvas上绘制图片或视频帧”。在...原创 2019-10-28 13:22:34 · 1972 阅读 · 0 评论 -
【文本】HTML5 Canvas 文本 章末小节
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy章节回顾本章讲了关于Canvas文字的基本操作，如何设置对齐方式、字型等文本绘制属性。然而，它并不支持一些复杂的文本操作，...原创 2019-10-26 14:47:25 · 291 阅读 · 0 评论 -
【文本】HTML5 Canvas小项目：环形文字（另祝1024节日快乐）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍之前我们实现了环形，也实现了文字，现在我们把二者结合在一起。正值今天是1024节，于是就简单实现了一个旋转的环形文字小特效。...原创 2019-10-24 13:18:27 · 1727 阅读 · 0 评论 -
【文本】HTML5 Canvas小项目：为坐标轴添加数字标签（带刻度线）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍我们之前介绍了坐标轴的绘制，但是没有添加数字标签表示刻度。现在直接在上个坐标轴版本上完善添加数字标签，效果如图所示。在线...原创 2019-10-23 09:36:33 · 2702 阅读 · 0 评论 -
【绘制】HTML5 Canvas 矩形的绘制（API+图文示例说明）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudyCanvas矩形APICanvas的API提供了三个方法，分别用于矩形的清楚、描边及填充。矩形的清除、描边与填充方法 描...原创 2019-08-25 11:00:41 · 947 阅读 · 0 评论 -
【绘制】HTML5 Canvas 绘制模型：canvas的浏览器渲染过程原理（详细理解和通俗理解）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy前提既然要使用Canvas，那就必须要有个很好的理解才行。想知道如何绘制Canvas图形、图像与文本的，其实需要了解阴影、alp...原创 2019-08-24 12:23:07 · 2231 阅读 · 2 评论 -
【基础知识】HTML5 Canvas 学习Canvas需要的数学知识:代数方程、三角函数、向量运算等（图文、举例）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy目录为什么要数学知识需要有哪些数学基础？1.求解代数方程2.三角函数2.1角的度量：角度和弧度2.2正...原创 2019-08-24 01:04:17 · 2277 阅读 · 0 评论 -
【基础知识】HTML5 Canvas 打印Canvas的内容(实现+进阶)
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy目录引子初级阶段思路实现效果结果核心代码进阶阶段反思分析原理实现效果核心代码...原创 2019-08-22 18:05:49 · 6133 阅读 · 0 评论 -
【基础知识】HTML5 Canvas 项目橡皮筋选框局部放大器（图文）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍Canvas橡皮筋选框局部放大器，是利用Canvas技术：拖拽鼠标创建选区，松开鼠标后自动放大选区的图像。演示链接h...原创 2019-08-22 12:45:20 · 1258 阅读 · 0 评论 -
【基础知识】HTML5 Canvas 动画项目-100个弹射小球(带控制器)
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍实现100个随机弹射的小球在Canvas中碰撞，另外用一个玻璃窗格作为控制台，控制动画的开始与暂停。演示链接http...原创 2019-08-21 23:14:42 · 1491 阅读 · 0 评论 -
【基础知识】HTML5 Canvas getImageData()和 putImageData() 在Canvas中绘制表面的保存与恢复(应用场景)
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy应用场景在需要对画布内进行鼠标的细致操作时，需要用辅助线：1、鼠标进入画布时，先用getImageData()保存之前的ca...原创 2019-08-20 21:37:56 · 1518 阅读 · 3 评论 -
【基础知识】HTML5 Canvas键盘事件
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy注意在浏览器窗口按下某个按键时，浏览器会生成键盘事件。这些事件发生在当前拥有焦点的HTML元素上，如果没有元素拥有焦点，那么事件...原创 2019-08-20 19:52:12 · 1465 阅读 · 0 评论 -
【基础知识】HTML5 Canvas精灵表坐标查看器(详细教程)
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy目录项目介绍项目演示详细步骤项目介绍本项目是精灵表(sprite sheet)坐标查看器。精灵表指的是...原创 2019-08-20 16:29:12 · 2294 阅读 · 3 评论 -
【基础知识】HTML5 Canvas 中canvas.width和context.canvas.width的区别和使用（参考官方文档）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy前提Javascript的代码是这个样子。var canvas = document.getElementById('ca...原创 2019-08-20 13:20:10 · 1307 阅读 · 0 评论 -
【基础知识】HTML5 Canvas中Canvas鼠标事件（两种方法）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy方法一可以这样做var canvas = document.getElementById('canvas'), ...原创 2019-08-20 13:02:22 · 5637 阅读 · 0 评论 -
【基础知识】HTML5 Canvas小项目时钟的简单实现（图文、演示）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy分析使用Canvas实现时钟，需要关注几个部件。画时钟的轮廓 画时钟上的数字 画时钟上的时针、分针、秒针 画时钟上的中...原创 2019-08-19 10:10:33 · 1302 阅读 · 0 评论 -
【基础知识】HTML5 Canvas 让老版本IE6、IE7、IE8支持Canvas的两种方法（链接）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy需求如果所实现的Canvas的应用程序必须支持IE6、IE7、IE8时，有两个选择。explorecanvas它可以在老...原创 2019-08-18 23:05:48 · 1029 阅读 · 0 评论 -
【基础知识】HTML5 Canvas中save()和restore()的使用/Canvas状态的保存和恢复（应用背景）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy解释：save()和restore()时保存和恢复Canvas的状态，如画笔的颜色、宽度等等，并不包括画布上的“像素图像”，目的...原创 2019-08-18 22:53:28 · 1244 阅读 · 0 评论 -
【基础知识】HTML5 Canvas的绘图环境CanvasRenderingContext2D的使用（各属性简介）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy目录前言属性提示：你可以扩充2d绘图环境对象的功能前言在JavaScript代码中，很少会用到canv...原创 2019-08-17 11:28:35 · 3082 阅读 · 0 评论 -
【基础知识】HTML5 Canvas API的toBlob()的使用（代码示例）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudyHTMLCanvasElement.toBlob()方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保...原创 2019-08-16 11:21:59 · 11067 阅读 · 1 评论 -
【基础知识】HTML5 Canvas API的toDataUrl()的使用（图文、演示）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy方法介绍HTMLCanvasElement.toDataURL()方法返回一个包含图片展示的 data URL。可以使用ty...原创 2019-08-16 10:26:04 · 5999 阅读 · 1 评论 -
【基础知识】HTML5 Canvas设置Canvas元素width和height的两种不同方式（图文）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy目录设置Canvas元素width和height的两种不同方式方式1:通过CSS设置：方式2:通过canvas标签...原创 2019-08-07 18:05:10 · 4322 阅读 · 3 评论 -
【读书收获贴】HTML5 Canvas核心技术(图形、动画与游戏开发)学习贴今日开帖
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy作为一名未来想走前端的学生，比较喜欢创造“有趣的事物”，不知是一见钟情还是心心念、想好好的去学习一下canvas，暂且不谈它能给我未...原创 2019-08-07 17:44:32 · 345 阅读 · 0 评论 -
【绘制】HTML5 Canvas小项目：鼠标控制文字旋转缩放（演示、图片）
介绍通过鼠标点击画布，触发文字放大旋转或缩小旋转。在线演示 详细代码说明原理控制旋转缩放的原理是：调节每一帧的坐标轴的长宽和角度，然后绘制。字体的大小是随着坐标轴大小变化而变化的。所以，只要通过计时器不断地设定rotate和scale即可。其他问题当缩小旋转缩小到一定程度，会产生一定的“彗星的尾巴”，是怎么回事？这里是因为每次是通过clearRect来清...原创 2019-09-26 00:16:03 · 1238 阅读 · 0 评论 -
【绘制】HTML5 Canvas图像合成：globalCompositeOperation的使用（附在线演示Demo）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍在默认情况下，将一个图像绘制在另一个图像之上，那么浏览器会简单地把源物体的图像叠放到目标图像上面。然而可以通过修改Can...原创 2019-09-20 14:50:55 · 651 阅读 · 0 评论 -
【绘制】HTML5 Canvas自定义坐标变换。transform()和setTransform()的介绍和使用
介绍我们之前实现了旋转(rotate)、缩放(scale)和平移(translate)，但是如果要实现更加复杂的坐标变换如“错切”就没那么容易了。错切效果图所以，接下来介绍更加基础的方法，来实现自定义的坐标变换。不仅能够实现旋转、错切和平移，也能够实现错切等等坐标变换。自定义坐标变换我们使用两个用于坐标变换的方法。CanvasRenderingContext2D对象...原创 2019-09-19 21:56:02 · 2391 阅读 · 0 评论 -
【绘制】HTML5 Canvas绘画画板小项目——交互式旋转多边形（带角度盘）
介绍这次的绘画画板小项目是一个可以交互式控制旋转的多边形，具体效果如图所示。在线演示 详细代码首先通过预设的属性在画板上通过鼠标绘制多边形，然后进入“控制”模式，点选多边形，可旋转到任意角度。代码讲解忽略之前讲解的重复知识点。这个小项目的难点在于：如何根据鼠标的移动旋转相应的角度。这里其实用到了反正切函数arctan，在js中表示为Math.atan(直角边1/...原创 2019-09-18 10:03:15 · 883 阅读 · 0 评论 -
【绘制】HTML5 Canvas绘画画板小项目——橡皮擦（圆形和方形）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍本节的橡皮擦的实现原理依然是用上一节的剪辑区域的原理，并且丰富了整个橡皮擦的应用。在线演示 详细代码...原创 2019-09-26 21:35:10 · 1927 阅读 · 0 评论 -
【绘制】HTML5 Canvas 绘制 章末小节
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy章节回顾本章深入讲解了如何在canvas中进行绘制。 坐标系统和Canvas绘制模型 绘制简单矩形、纯色、透明色...原创 2019-09-26 22:32:57 · 307 阅读 · 0 评论 -
【文本】HTML5 Canvas文字的描边、填充和阴影。（代码、示例）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍在Canvas中，可以使用fillText(text,x,y)和strokeText(text,x,y)立即绘制一串文字；可...原创 2019-09-28 10:13:00 · 2184 阅读 · 0 评论 -
【文本】HTML5 Canvas渐变色、图案填充文本
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍之前我们介绍过如何创建渐变色和图案，接下来使用渐变色和图案创建文本。在线演示 详细代码解读其实和之前创建渐变...原创 2019-09-29 01:07:22 · 670 阅读 · 0 评论 -
【文本】HTML5 Canvas设置字型属性(font-style、font-variant、font-weight、font-size、line-height、font-family)
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍在Canvas中，可以通过绘图环境对象的font属性设置文本所采用的字型。该属性是一个CSS3格式的字型字符串，各个分量如下...原创 2019-09-29 15:41:34 · 8685 阅读 · 0 评论 -
【文本】HTML5 Canvas 文字水平对齐textAlign和垂直对齐textBaseline
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍在canvas中使用strokeText()或fillText()绘制文本时，需要指定X和Y的坐标。本节讲的就是“文字绘制到...原创 2019-10-09 15:01:25 · 1396 阅读 · 0 评论 -
【文本】HTML5 Canvas文本度量measureText()
介绍在canvas绘图环境中，measureText()方法可以度量字体的宽度。measureText()方法返回了一个包含width属性的TextMetrics对象，后期我们会使用这个方法实现文本编辑器。measureText()方法的用法 方法 描述了 TextMetrics measureText(DOMString text) 返回一个TextMetric...原创 2019-10-11 11:50:58 · 3831 阅读 · 0 评论 -
【绘制】HTML5 Canvas 剪辑区域clip()的使用
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍clip()方法的用法 方法 描述 clip() 将剪辑区域设置为当前剪辑区域与当前路径的交...原创 2019-09-26 21:20:26 · 1639 阅读 · 0 评论 -
【绘制】HTML5 Canvas坐标变换——坐标系的平移(translate)、缩放(scale)、旋转(rotate)、镜像。（图文、代码）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy引入有时候，换种思路是可以简化问题的。比如，当我们要在画布中心绘制n个几何图形时： 常规思考——我们要计算每个图形的中...原创 2019-09-17 01:18:14 · 4816 阅读 · 1 评论 -
【绘制】HTML5 Canvas绘画画板小项目：可编辑控制的贝塞尔曲线（可控制锚点和控制点的位置）
介绍之前，我们说了贝塞尔曲线的绘制，但那个演示效果只是演示贝塞尔曲线但死页面，这节来实现一个可以编辑和控制的贝塞尔曲线。在线演示 详细代码代码解读在详细代码中，综合了直线、圆弧、阴影、背景网格线、辅助线等之前的Demo，也利用了拖拽、绘图表面的保存恢复等之前的原理，这里不再过多介绍。现在阐述如何实现的可编辑贝塞尔曲线。和之前实现拖拽效果的原理类似，通过不断地重绘下一时...原创 2019-09-15 20:46:45 · 1800 阅读 · 0 评论 -
【绘制】HTML5 Canvas中isPointInPath介绍和使用（判断是否在路径内，并实现拖拽小方块）
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudy介绍isPointInPath()判断路径中是否包含监测点（作为参数传入）。isPointInPath()介绍 方法 ...原创 2019-09-15 08:22:29 · 1811 阅读 · 1 评论