Canvas

Canvas学习:绘制线段

在上一篇介绍Canvas坐标系统的结尾处,我们使用了Canvavs绘制了一个网格。整个效果是由直线和文本构成。在这一节中,我们来看看如何使用Canvas绘制线段。在Canvas中,线段也是路径中的一种,被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)lineTo(x,y)stroke()几个方法。

Canvas学习:Canvas里的坐标系统

上一节我们做好了使用Canvas的准备工作,但并没有深入的介绍如何使用Canvas,比如怎么绘制图形,怎么做Canvas动画等。但并不用着急,随着我们后面的深入学习,这一切都会知道的。在深入学习之前,我们有必要先了解Canvas里的坐标系统。那么这一节,就先来了解Canvas的坐标系统。

Canvas学习:Canvas入门准备

由于工作的需要,最近开始在学习HTML5的canvas相关的知识。这里主要记录自己学习canvas相关的知识笔记。如果文章有不对之处,还请大婶们多多指正。今天这篇文章是学习canvas的一些准备工作。

如何制作霓虹灯动画?

绘制好灯泡运动的圆角矩形路径,每个路径点入栈,每次渲染都基于各个路径点坐标绘制小灯泡,周而复始。非常简单,就是步骤比较繁琐,需要定位一个起始点 然后依次。上、右上圆角、右、右下圆角、下、左下圆角、左、左上圆角。

如何制作水球动画图?

在 echart 的 Issue 上看到有人有水球百分比可视图的需求, 并且在 pull-request 上看到有人有类似实现,但是却感觉实现的并不完美,于是想自己尝试实现。

页面

返回顶部