HTML5

SVG之旅:填充特性

通过前面的学习,你可以用你掌握的知识来绘制任何图形,接下来的目标是给绘制的图形着色。可以使用几种方法来着色,包括指定对象的属性,使用内联CSS样式或者内嵌的CSS样式,或者使用外部的CSS样式文件。大多数的Web网站的SVG使用的是内联样式CSS。但这些方法都有各自的优缺点。在SVG中要给已绘制好的图形着色,我们主要通过SVG的填充和描边特性来完成。比如在前面的示例中,我们常能看到的fill属性,就是用来给图形设置填充颜色;stroke属性设置绘制对象的线条的颜色。但SVG的填充和描边特性不仅仅就这两个属性,那么今天的目标就是来学习这方面的特性。

深度掌握SVG路径path的贝塞尔曲线指令

又又一次说起贝塞尔曲线(英语:Bézier curve维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完全不能承受富有创意的创作的,至少得有我当年追我老婆的脸皮厚才行。

SVG之旅:路径

通过上一节的学习,我们知道了怎么在SVG中绘制一些基本的图形。在SVG中除了可以通过<rect><circle><ellipse><polygon><line><polygon>来绘制矩形、圆形、椭圆、多边形、直线和折线等形状。除此之外,在SVG中还有一个<path>元素,可以帮助我们在SVG中绘制任何你想要的形状。也有人说,掌握了SVG中的<path>是学习SVG的重中之重。今天我们来了解SVG中有关于<path>的相关知识。

SVG之旅:基本形状

在未学习SVG之前,在Web页面或Web应用中使用一些基本形状一般都是通过CSS的border来模拟或者clip-path来绘制图形形状,也有使用Canvas来绘制。当然也有很多时候直接使用img或者background-image直接来引用图形。而在SVG中,提供了更为强大的图形形状的能力,可以直接通过SVG来绘制矩形圆角矩形圆形多边形曲线等。如果对Illustrator或者Sketch可以很轻松的绘制出基本形状,然后导出SVG文件。今天我们主要来了解在SVG中怎么通过代码来绘制基本形状。

SVG之旅:SVG的图层和渲染顺序

不管是在制图软件中还是Web页面的DOM元素,都有层的概念。在制图软件中,大家比较熟悉,能非常的清晰的看出图层的概念。而在Web页面中,特别是我们熟悉的HTML的DOM中,其实他也有层的概念。不同的是制图软件可以用鼠标拖动图层来改变层次,而DOM中需要依赖于CSS的z-index属性来控制他的层次关系。其实在SVG中,他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。

SVG之旅:SVG简介

自从2014年开始陆陆续续的开始就在接触SVG。但由于自身的原因,并没有对SVG进行系统化的学习,在实际的工作项目中并未真正的使用SVG相关的技术。为了储备相关的知识,并尝试在项目中使用SVG,有必要对该技术进行系统化的梳理和学习。所以开始每周会抽出大半的时间来学习和整理SVG相关的知识,希望在几个月后,这方面的技术有所突破。

HTML5 History API

HTML5 History API是HTML5提供对history栈中内容的操作。DOM window对象通过history对象提供了对浏览器历史的访问。它暴露了很多有用的方法和属性,允许你在用户浏览历史中向前和向后跳转。另外也提供了一些很有意思的API。在这篇文章中简单的来了解history相关的知识。

使用 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球。

页面

返回顶部