现代 CSS

Canvas

使用Canvas给DOM元素添加粒子效果

让我们来看看如何将<canvas>的自由度与HTML元素结合起来,使Web页面在视觉上有更好的效果。具体地说,我们将创建一个基于HTML-to-particle的效果,但同样的技术也可以用于实现很多类型的效果。在开始之前,可以通过Repo获取源代码

Canvas粒子系统:3D球体

前些日子在Codepen上看到了一个很惊艳的3D特效,一时惊叹,fork下来后,读了一下作者的源码,200多行,十分精简,但是内劲无穷。这里和大家分享一下作者的思路和一些基础的数学知识,

如何用Canvas做一个3D球

这篇文章是根据博客园@Waxes同学在做的3D球体的Demo提供的思路,使用案例中的提供的一些数学公式制作的3D球。

理解动画中的线性插值

在传统(手绘)一个高级动画或者动画艺术家都喜欢绘制关键帧来定义一个动画。现场传递给助理,一般是实习生或者初级艺术家在此基础上做一些其他性的工作,具体的说,他们就是在关键帧动画之间添加一些中间片段让动画看起来更流畅,更自然。还记得在小学的时候,老师告诉你电脑是笨蛋吗?电脑需要被告知一系列的确切步骤,他们才知道需要做什么。今天我们来看看这一序列的步骤或算法,帮助计算机绘制动画关键帧之间必要的中间画。

线性插值

最近在看Canvas的一些动画实例当中,时常看到lerp()这个函数,一直以来并不知道这个函数起什么作用,有什么特性。今天花了一些时间,Google了一下,才知道这个函数是线性插值。那么线性插值是个什么鬼?他在一些程序中又起啥作用?这就是这篇文章要探讨和学习的。

Canvas学习:渐变

通过前面的Canvas学习,了解到在Canvas中绘制图形时,使用strokeStylefillStyle来设置绘制图形的边框颜色和填充颜色。前面的教程我们看到的都是给这两个属性设置具体的颜色值,比如#fffred之类。其实在Canvas中,除了给strokeStylefillStyle设置颜色之外,还可以设置渐变色。今天我们要学习的就是Canvas中的渐变知识。

Canvas学习:裁切clip()

上一节中学习了Canvas的图像合成,通过图像合成的技术可以轻易的实现类似于刮刮卡的效果,其实除了实现刮刮卡的效果之外,还可以使用这种技术制作类似于探照灯的效果。

Canvas学习:图像合成

合成是指如何精细控制画布上对象的透明度和分层效果。在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。事实上,它和CSS中的混合模式非常的类似。简单点讲,在Canvas中,把图像源和目标图像,通过Canvas中的globalCompositeOperation操作,可以得到不同的效果。

Canvas学习:绘制文本

前面的课程我们学习的都是如何在Canvas中绘制图形,但很多时候,除了绘制图形之外还有很多情景要同文本打交道。不过在Canvas中到目前为止只提供了一些必备的基本功能,例如文本的描边与填充,向Canvas之中放置文本,以及用像素为单位来计算任意字符串的宽度等。接下来的内容,我们就来了解在Canvas中怎么绘制文本以及一些基本的操作。

Canvas学习:封装Canvas绘制基本图形API

到今天这节是有关于在Canvas中绘制图形部分的最后一篇文章。从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法,我们可以很轻松的绘制出一些基本图形,比如直线、弧线、矩形、圆形、三角形等。但有很多基本图形的绘制是没有现成的方法,需要通过CanvasRenderingContext2D对象中的属性和方法组合在一起才能绘制出来,比如说点划线、箭头和正多边形等。为了更好的帮助大家在Canvas中绘制这些基本图形,可以将这些基本图形的绘制封装起来。今天这篇文章,我们主要来看看怎么将这些函数封装。

页面

返回顶部