HTML5

使用 Paint Timing API

现在是成为 Web 性能爱好者的最佳时间,特别是 Chrome 60 的 Paint Timing API 的出现更加证明了这一事实。虽说 Paint Timing API 仍属于正在激增的 Performance API 之一,但是它还提供了抓取 页面资源 耗时的能力,通过这个全新的实验性 API,你可以在页面开始绘制时就去抓取你需要的度量值。

Canvas粒子系统:3D球体

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

如何用Canvas做一个3D球

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

理解动画中的线性插值

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

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中绘制这些基本图形,可以将这些基本图形的绘制封装起来。今天这篇文章,我们主要来看看怎么将这些函数封装。

Canvas学习:自定义的坐标变换

相对于Web坐标系统而言Canvas里的坐标系统较为复杂一些,除了默认的坐标系统之外还有坐标变换概念。在上一节中,已经了解了如何使用scale()rotate()translate()方法来变换坐标系。这三个方法提供了一种简便的手段,用于操作绘图环境对象的变换矩阵(Transformation Matrix)。默认情况下,这个变换矩阵就是单位矩阵(Identity Matrix),它并不会影响所要绘制的物体。当调用了scale()rotate()translate()方法之后,变换矩阵就会被修改,从而也会影响到所有后续的绘图操作。

页面

返回顶部