CSS Grid Layout是W3C规范中专门为Web布局提供的一个特性。CSS Grid Layout将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了CSS Grid Layout之后，布局不再局限于单个维度了。这个时候你要实现类似九宫格，拼图之类的布局效果显得格外的容易。虽然CSS Grid Layout给Web布局带了革命性的变化，那么他在原生客户端（也就是APP）开发中，其运用是否也能像Web一样呢？接下来我们就一起来探讨。CSS Grid Layout发展CSS Grid Layout是微软于2010年提出的一个布局模块，最早在IE10实施。2011年4月首次公开W3C规范草案，2015年3月2日Chrome也开始支持这个模块。在2016年9月29日成为W3C候选标准。值得庆幸的是，2017年3月，Chrome和Firefox将开始默认支持Grid布局。其中，Mozilla将在3月7日发布的Firefox 52版本上开始支持。由于要先在Chrome Canary中支持Grid，所以，谷歌将在3月14号的Chrome 57版本上开始默认支持Grid.一旦在公开版本中默认得到了支持，那么当前在开发版本中的所有Grid功能都将在公开版本中出现。Grid时代就此开始。CSS Grid Layout能得到众多现代主流浏览器的支持，需要特别感谢@Rachel ...继续阅读 (19)

CSS动画性能非常好。虽然是简单的几个动画元素，如果你的代码没有让动画表现出其意义或者说使用页面变得更为复杂，网站的用户可能很快就会发现，并且有可能让用户觉得恶心。反而得不到相应的好评。在这篇文章中，我将介绍浏览器开发者工具的一些有用的功能，这些功能将能帮助你检查出你的CSS动画在渲染引擎下会发生些什么。这样，当你的动画看起来有点卡（帧率图有点波涛汹涌），你会找到地应的方法知道为什么为会这样以及如何解决它。调试CSS性能的开发者工具你的动画需要达到60fps（每秒帧数），这样动画在浏览器中运行才会流畅，反之，帧率越低，你的动画就越糟糕。这也意味着浏览器没有超过16ms每帧的工作。但在这期间它做什么？你又是怎么知道你的浏览器是否跟上所需的帧率？我认为评估一个动画的质量好坏没有什么比用户体验时的感觉要更好。然而，现代浏览器开发者工具也并不是完全100%的可靠，不过庆幸的是，浏览器开发者工具也越来越强大，它可以帮助你编辑和调试你自己的代码。当你需要检查帧率和CSS动画表现时，浏览器开发者工具也是真实的。接下来介绍如何它们是如何工作的。Firefox浏览器管理性能工具在这篇文章中，我使用Firefox性能工具。另一个竞争对手Chrome也有类似的性能工具。你可以根据自己的习惯选择自己喜欢的。因为这两个浏览器都提供了强大的性能特性。选择其中的一个操作打开Firefox开发者工具：在你的Web ...继续阅读 (21)

在《如何使用CSS Grid布局实现限宽容器全屏效果》一文中介绍了使用CSS Grid布局实现限宽容器全屏效果，特别是全屏图片的效果时常可见。但这篇文章并没有详细阐述为什么使用CSS Grid这种方法。@Rachel Andrew新发的博文尝试阐述其中的原理。@Rachel Andrew写了很多教程来解释CSS Grid规范的，然而要理解CSS Grid这种新特性需要理解网格的几件事。根据网格线名称定位网格项目使用过CSS Grid的同学都知道可以通过网格线的号码给网格项目定位。基于这个可以实现限宽的全屏效果。如下图所示，我们创建一个三列的网格，这样就得到了四个号码的网格线名称，比如1、2、3和4。对于跨全屏的网格项目，可以从网格线1开始到网格线4结束，对于居中或者其他内容，可以放置在网格线2开始，到网格线3结束。根据上述的介绍，写了一个示例：上面的示例并没有使用所有的网络线序列号。只是在需要的地使用了，这样比较干净一些。你可以命名网络线名称你需要知道能使用的网线名称。在接下来的示例中，使用了网格线名称替代网络线序列号来放置网格项目。这个例子中，把网络线命名了*-start和*-end。这一点很重要。当你给网络线命名时，可以选择名字，比如*-start和*-end。这样一来可以同时声明一个网格区域。这也是网格的一个黑魔法。听起来是不是很奇怪。这里我们声明了四条网格线名称，分别给行和 ...继续阅读 (26)

今天看到@Dennis Gaebel分享的一篇博文。觉得很有意思。同时感觉老外分享出来的东西就是不一样，尽管自己也专门整整CSS，但从新特性的发掘和敏锐性就差十万八千里。不吐槽了，还是回到正题来吧。众所周知，CSS是不具备类似其他程序语言一样的特性，没有逻辑性而言。他就是一门描述性语言（暂时把她称作语言吧）。因此才会有各式各样的CSS处理器出来，比如较为流行的Sass，LESS和Stylus。当然还有近年最强大的PostCSS，在项目中使用PostCSS能将你带入到一个全新的CSS世界，至于原因是什么，暂且不在这里阐述。使用过CSS处理器的同学应该知道，在CSS处理器中最常见的几个特性是变量、混合宏、扩展、嵌套、运算以及一些简单的逻辑运算。经过多年的沉淀，这些特性开始尝试在CSS中使用。比如下面我们将要说的几个特性，就是CSS自身已具备或将要具备的类似于CSS处理器的特性。变量变量是CSS处理器最基本的特性之一，它能类似于其他的程序语言一样。通过变量让我们的代码变得更好维护和管理。比如说给项目定制多道主题之时，变量特性就显得很强。对于CSS自身而言，他承接CSS处理器众多特性之一变量。只是使用的方式略有差别，咱们先来看Sass中的变量声明方式和调用方式：$spacing-unit: 20px; main { margin: $spacing-unit; paddi ...继续阅读 (20)

CSS Grid是一个强大的工具，它允许在Web上创建二维布局。这一篇学习CSS Grid的指南，通过图形的方式帮助您更好的理解和学习CSS Grid。花时间整理和阅读这篇文章都是非常有意义的。我们要特别感谢Mozilla开发人员和W3C规范中有关于CSS Grid的资源。同时也需要特别感谢@Jen Simmons和@Rachel Andrews两位女士，她们是CSS Grid的主要贡献者，可以说要是没有她们，就没有今天的CSS Grid。网格容器通过display属性设置属性值为grid或inline-grid可以创建一个网格容器。网格容器中的所有子元素就会自动变成网格项目（grid item）。display: grid网格项目默认放在行中，并且跨网格容器的全宽。display: inline-grid显式网格使用grid-template-columns和grid-template-rows属性可以显式的设置一个网格的列和行。grid-template-rows: 50px 100pxgrid-template-rows指定的每个值可以创建每行的高度。行高的尺寸可以是任何非负值，长度可以是px、%、em等长度单位的值。item1和item2具有固定的高，分别为50px和100px。因为只定义了两个行的高度值，所以item3和item4的高度是根据其自身的内容来定义。grid- ...继续阅读 (34)

在传统（手绘）一个高级动画或者动画艺术家都喜欢绘制关键帧来定义一个动画。现场传递给助理，一般是实习生或者初级艺术家在此基础上做一些其他性的工作，具体的说，他们就是在关键帧动画之间添加一些中间片段让动画看起来更流畅，更自然。他们可以不考虑或者不讨论动画的中间帧。但绘制动画的中间帧是很有必要的，或者说这方面的工作是繁重的。但这是二十世纪之间的艺术家们做的事情，在今天这些事情都是让计算机来处理这些繁重的任务。还记得在小学的时候，老师告诉你电脑是笨蛋吗？电脑需要被告知一系列的确切步骤，他们才知道需要做什么。今天我们来看看这一序列的步骤或算法，帮助计算机绘制动画关键帧之间必要的中间画。我将使用HTML5的Canvas和JavaScript来说明这个算法。即使你都不知道他们，按着下面的步骤来阅读也能理解这篇文章。目标我们的目标很简单，就是整一个动画的球，这个球从A点(startX, startY)移动到B点(endX, endY)。如果这个场景传递给一个传统的工作室，那么高级艺术家将会像下面那样绘制关键的动画帧：然后初级艺术家们将会在图纸中绘制动画关键帧之间的动画帧：再次提醒大家，没有动画工作室，我们也没有初级的艺术家。我们只有一个目标和一台电脑，我们现在能做的就是写一些正确的代码，用代码来替代初级艺术家们在图纸中绘制工作。实现方法我们在技术上需要在HTML中写一行代码：接下来写一些JavaS ...继续阅读 (24)

最近在看Canvas的一些动画实例当中，时常看到lerp()这个函数，一直以来并不知道这个函数起什么作用，有什么特性。今天花了一些时间，Google了一下，才知道这个函数是线性插值。那么线性插值是个什么鬼？他在一些程序中又起啥作用？这就是这篇文章要探讨和学习的。什么是线性插值线性插值是数学、计算机图形学等领域广泛使用的一种简单插值方法。在平常实际运用当中，把插值称之为lerp。简单而言：lerp是两点之间的线性插值的别称。在深入了解之前，有几个小概念先介绍一下：内插：内插是数学领域数值分析中的通过已知的离散数据求未知数据的过程或方法拟合：根据若干离散的数据，得到一个连续的函数（也就是曲线）或者更加密集的离散方程与已知数据相吻合也就是说：内插是曲线必须通过已知点的拟合。在离散数据的基础上补差连续函数，使用这条连线曲线通过全部的离散数据点。插值是离线函数逼近的重要方法，利用它可通过函数在有限个点处的取值状况，估算出函数在其他点处的近似值。时常看到的插值主要分为：线性插值、双线线性插值和三线性插值。虽然插值有多种类型，但我们今天要聊的也只是其中的一种，那就是最简单的插值——线性插值。如何进行线性插值假设我们已知A点的坐标(x0,y0)与B点的坐标(x1,y1)，要得到[x0, x1]区间内某一位置x在直线上的值，比如下图中的(x,y)：根据图中所示，我们可以得到：(y - y0) / ( ...继续阅读 (21)

通过前面的Canvas学习，了解到在Canvas中绘制图形时，使用strokeStyle和fillStyle来设置绘制图形的边框颜色和填充颜色。前面的教程我们看到的都是给这两个属性设置具体的颜色值，比如#fff、red之类。其实在Canvas中，除了给strokeStyle和fillStyle设置颜色之外，还可以设置渐变色。今天我们要学习的就是Canvas中的渐变知识。Canvas中的渐变和CSS的渐变也有点类似，分为线性渐变和径向渐变（也被称之为扩散性渐变）。CanvasRenderingContext2D对象中提供了两个方法：CanvasRenderingContext2D.createLinearGradient()：创建线性渐变CanvasRenderingContext2D.createRadialGradient()：径向渐变那么在Canvas中如何使用渐变的方法，给绘制的图形或文本增强效果。线性渐变在Canvas中首先使用createLinearGradient()创建一个新的CanvasGradient对象，然后将它赋值给一个变量，这样就可以将变量运用给strokeStyle和fillStyle。createLinearGradient()使用语法如下：ctx.createLinearGradient(x1, y1, x2, y2)也就是说createLinearG ...继续阅读 (30)

在Web的布局设计中时常会碰到全屏的效果，而且很多时候会碰到在限制宽度的容器中实现全屏效果。比如下图的效果：在以前面对这样的效果，最好的解决方案是能过HTML的结构来做一定的处理。比如：比如我们的布局效果是960px的水平居中效果：.container { width: 960px; marign-left: auto; margin-right: auto; } .banner .container { width: 100%; }但这种方法虽然能解决我们布局中在某个区域中实现全屏效果。但有的时候，这种方法并不能解决问题。不过，值得庆幸的是，有另外的方案可以在限宽的容器中实现全屏效果。.u-containProse { max-width: 40em; margin-left: auto; margin-right: auto; } .u-release { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }这是一个较新的方案，不过有一个缺点。虽然这个方法能在限定宽度容器中实现全屏的效果，但是在一些平台上会出现一个水平滚动条，这是让人无法接受的。除非你在body元素上设置overflow-x:hidden;。有关于如何在限宽的 ...继续阅读 (42)

Web发展到现在，已经有很大的变化，特别在当前这样的时代，我们面对的设备种类繁多。言外之意，这样的环境之下，Web的页面布局时常会碰到一些缩放比例的控制，特别是针对img、iframe、object、video和embed等元素的比例缩放。当然，就img元素而言，要实现纵横比例的布局已有多种方案，而且实战性也特别的强，并且在Responsive设计中已使用广泛。既然img可以实现，那其他元素iframe、video等元素也可以借鉴其中的一些实现原理。今天我们就来说说一些这方面的实现方案。纵横比在具体介绍如何实现纵横比之前，先来了解一下纵横比相关的概念。纵横比分为固定纵横比和自适应纵横比。基于width的百分比来设置padding百分比值，把这种方式称之为固定纵横比。一般我们通过width的百分比来计算padding-top或padding-bottom的百分比值，其计算公式如下：padding-top = (元素高度 / 元素宽度) * 100% padding-bottom = (元素高度 / 元素宽度) * 100%比如下图：上图展示的是一个9 / 16的固定纵横比例，计算出来就是56.25%。根据这个原理，我们可以在CSS处理器做相关处理：@mixin fixed-aspect-rations($height, $width) { padding-bottom: $ ...继续阅读 (20)

上周，我写了一篇关于如何使用CSS制作bitsofcode logo的动画效果。之后收到一些建议，尝试比较一下CSS动画和Web Animations API。所以今天写了这篇文章。Web Animations API简介和上周一样，我开始介绍Web Animations API。 Web Animations API为开发人员提供了一种方式，使用JavaScript可以直接操作浏览器的动画引擎。如果你没有从示接触过Web Animations API的话，这篇文章是一篇很好的入门课程。除此之外，在站上已经有很多相关的教程，感兴趣的同学，可以点击这里进行阅读。创建一个动画使用Web Animations API创建一个动画，可以使用Element.animate()函数，这个函数接受两个参数keyframes和options。element.animate(keyframes, options);keyframeskeyframes对象代表动画事件的时间线（Timeline）。有两种方法来写这个对象。为了说明他，我们来创建一个grow动画，这个动画的效果是把元素放大两倍。使用CSS的@keyframes可以这样写：@keyframes grow { 0% { transform: none; } 100% { transfor ...继续阅读 (31)

上一节中学习了Canvas的图像合成，通过图像合成的技术可以轻易的实现类似于刮刮卡的效果，其实除了实现刮刮卡的效果之外，还可以使用这种技术制作类似于探照灯的效果。前面也说过了，Canvas中的图像合成非常类似于CSS中的混合模式，也类似于一些设计软件中的图层合层。但就上面的探照灯的效果，其又有点像是CSS的遮罩。其实在Canvas中，除了使用图像合成之外能实现上面的探照灯的效果之外，还可以使用Canvas的裁切clip()方法。那么这一节，我们就来简单的了解Canvas的clip()的相关知识点。Canvas中的剪切接下来我们要聊的不是图像的合成，而是Canvas中的另一个有用的功能：剪切区域。它是Canvas之中由路径所定义的一块区域，浏览器会将所有的绘图操作都限制在本区域内执行。在默认情况下，剪辑区域的大小与Canvas画布大小一致。除非你通过创建路径并调用Canvas绘图环境对象的clip()方法来显式的设定剪辑区域，否则默认的剪辑区域不会影响Canvas之中所绘制的内容。然而，一旦设置好剪辑区域，那么你在Canvas之中绘制的所有内容都将局限在该区域内。这也意味着在剪辑区域以外进行绘制是没有任何效果的。简单点讲，Canvas的裁切路径和普通的Canvas图形差不多，不同的是它的作用是遮罩，用来隐藏没有遮罩的部分。如下图所示，红边五角星就是裁切路径，所有在路径以外的部分都不会 ...继续阅读 (29)

合成是指如何精细控制画布上对象的透明度和分层效果。在默认情况之下，如果在Canvas之中将某个物体（源）绘制在另一个物体（目标）之上，那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。事实上，它和CSS中的混合模式非常的类似。简单点讲，在Canvas中，把图像源和目标图像，通过Canvas中的globalCompositeOperation操作，可以得到不同的效果，比如下图：正如上图，红苹果和黑色的圆，通过globalCompositeOperation的destination-out就变成了被咬了一口的红苹果。也就是说，在Canvas中通过图像的合成，我们可以实现一些与众不同的效果，比如我们要制作一个刮刮卡抽奖的效果。 今天我们就来了解Canvas中的图像合成怎么使用。控制图像合成操作在Canvas中有两个属性globalAlpha和globalCompositeOperation来控制图像合成操作：globalAlpha：设置图像的透明度。globalAlpha属性默认值为1，表示完全不透明，并且可以设置从0（完全透明）到1（完全不透明）。这个值必须设置在图形绘制之前globalCompositeOperation：该属性的值在globalAlpha以及所有变换都生效后控制在当前Canvas位图中绘制图形图像合成类型在Canvas中globalCompositeOper ...继续阅读 (24)

流体排版这一词似乎看上去有点陌生，在英文中常把他称之为Fluid Typography，当然也有很多朋友称之为流体字号（Fluid Size）。大概的意思就是Web排版中的font-size会根据浏览器窗口的大小自动改为。比如下图所示的一个效果：看到上图的效果，大家首先可能会想到的是CSS中的Viewport单位vw或者vh之类，当然也可能会认为是通过媒体查询来改变元素font-size来实现的。事实上，他们都能实现类似的效果，但问题是我们想要精确的实现流体排版（根据视窗大小变化精确改变font-size的值），那并不是件容易的事情。那问题来了，我们有没有方法可以实现所谓的精准流体排版呢？答案是肯定的，接下来我们就要来探讨这方面的实现思路、细节以及使用到的一些数学公式。实现思路精准流体排版最核心的就是浏览器视窗大小改变时，font-size能够根据视窗的大小做到精准的变化。当用户收缩和拉大浏览器窗口时，其大小有一个变化，在CSS中，咱们通过把每一个大小点称为断点，断点也是媒体查询中一个重要的概念。除此之外，如果我们用Viewport单位来描述的话，视窗大小始终是100vw。如果font-size设置为2vw，那么其大小就是浏览器窗口宽度的2%，当窗口拉到1000px时，这个时候font-size对应的是20px。原理是不是很简单，而且其中还涉及到一些数学计算，CSS中动态计算的话， ...继续阅读 (50)

2014年@Marcin Wichary在Medium分享了如何更好的突出链接的下划线效果，@Mary Lou更疯狂的制作出了一个Demo，这个Demo展示了多种突出链接的效果，有些是使用的背景色，有些是使用不同的下划线方式。那么，接下来我们一起看看在Web中，如何更好的美化下划线的效果。在CSS中，众所周之使用text-decoration:underline;可以为任何文本添加下划线的效果。那仅使用这个来添加下划线会有什么问题呢？我们先不回答这个问题，咱们先来讨论一下理想的场景中，强调使用下划线，它应该做到以下几点：下划线应该位于文本基线（baseline）下方下划线应该可以跳过下行字母能改变下线线的颜色、粗细和样式横跨文本在任何背景下都能正常工作这些要求并不为过，都是很合理的要求，但据我所知，到目前为止，没有哪个纯CSS的方式能满足上述的这些要求。仔细回忆一下，现在在Web中能使用CSS实现文本下线的方案常见的主要有：text-decorationborder-bottombox-shadowbackground-imagetext-decoration-*接下来，我们分别来看看这些方法实现文本下划线效果之间的利弊。text-decorationWeb中最早用来给文本添加下划线的属性是text-decoration。只要在元素上使用text-decoration:underl ...继续阅读 (30)

了解CSS的同学都应该知道，CSS是由Cascading Style Sheets三个单词首字母组成，简单的讲就是层叠样式表。事实上，在CSS中，层叠（也有同学称之为级联）也是一个非常基础，但也是一个非常重要的概念。只有理解了层叠这个概念才能更好的理解和使用CSS中的每一个属性。话又说回来，既然是一个基础概念，懂CSS的同学都知道，那还有必要来说这个吗？那我就得问一下了，你真的懂CSS中的层叠，能使用好CSS的层叠吗？如果你没有这方面的自信，那不仿花点时间来阅读这篇文章。管理CSS层叠的困惑有些时候CSS层叠成为很多开发者（特别是不太熟悉CSS的开发人员）的眼中钉。为什么这么讲呢？在CSS中有些属性是有继承关系的（之前在当元素元素的祖先元素设置了样式），当我们想要恢复属性的默认值的时候，就必须记住该属性的默认值是什么？可想而之，如果不熟悉其默认值，又想覆盖继承过来的样式，那将是多么一件痛苦的事情。所幸的是，CSS提供了一些机制来处理继承。理论上讲，任何CSS属性都具有除none之外的四个值：initial、inhert、unset和revert。这些值就是CSS用来处理继承的机制。虽然这些值有些还没有普遍得到浏览器的支持，为了更好的管理CSS层叠，或者说处理好CSS的继承，我们还是很有必要的对他们进行了解。回顾CSS的语法CSS的语法其实非常的简单，在CSS样式表中，我们都像下面这 ...继续阅读 (30)

自从去年下半年开始，CSS Grid布局的相关教程在互联网上就铺天盖地，可谓是声势浩大。就针对于Web布局而言，个人认为Grid布局将是Web布局的神器，它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式，而Grid最大的特色，采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。就我个人而言，我也一直在不断的关注这个布局利器的相关更新，自从最初规范的出来，到目前规范的完善。在站上也不断的在更新CSS Grid布局的使用。虽然这方向的教程已经很多了，但各有千秋，我追求以最简单，最直接的方式来阐述它的使用方式方法。让初学者能尽快的掌握其使用规则。前段时间@Mirza Joldic在Medium上发布了一篇文章，通过几个Gif动态非常形象的阐述了CSS Grid的几个核心概念以及使用方法，今天我就借花献佛，用这几张图让初学者快速掌握CSS Grid的核心概念和使用技巧。Web布局的历史演变自从Web出来至今，Web的布局也经过了几个演变，下图可以一目了然：有关于Web布局的演变史，去年也整理过一篇相关的文章简单的阐述了这方面的故事，如果你感兴趣的话，可以点击这里进行了解。在Web的学习过程中，学习Web布局是一个不可避免的过程，而随着前端技术的日新月异的变化，布局方式也在不断的更新，早在2013年@Peter Gasston就 ...继续阅读 (27)

今天我们来介绍CSS中的一个新属性flow-root。这个属性是CSS Display Module Level3中的一个属性。简单讲这个属性是display中的一个新属性，对于display属性，大家熟悉的可能是常见的几个属性，比如block、inline、inline-block、flex、grid、table和table-cell等，其实除了这些常见的属性值之外，还有很多其他的值。如果想了解更多，那可以点击这里阅读。那flow-root既然是display的新属性值，那这个属性值有什么特性呢？这就是今天要聊的东西。BFC在学习flow-root之前，咱们要先了解CSS中一个非常重要的概念，那就是BFC（Block Formatting Context）的概念。那什么是BFC呢？在W3C规范中的BFC是这样定义的：浮动元素和绝对定位元素，非块级盒子的块级容器（例如，inline-block、table-cells和table-captions），以及overflow值不为visiable的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容 ...继续阅读 (40)

今天，CSS处理器已是Web开发流程中的一个标准。预处理器的主要优点之一就是它们能够使用变量。这可以帮助你避免复制粘贴代码，也简化了开发和重构。我们使用预处理器可以存储颜色、字体和布局等细节——一切我们想使用的CSS都可以。但预处理器的变量也有很多限制：不能动态修改变量没有DOM结构的意识不能使用JavaScript读取或更改做为这些问题，社区发明CSS自定义属性。从本质上讲，这些工作看上去像CSS变量，它们的工作方式反映在他们的名字上。可以说自定义属性打开Web开发的新视野。语法声明和使用自定义属性每当你开始使用一个新的预处理器或框架时有一个通常的问题，那就是你必须学习新的语法。每个处理器需要用不同的方法来声明变量。通常都会使用一个像征性的实体符(Symbol)，比如说，在Sass中使用$符，在LESS中使用@来声明变量。CSS自定义属性也使用了类似的方法，它引入--符号来声明一个变量。但这里的好处是你可以学习该语法和跨浏览器重用。你可能会问“为什么不重用现有的语法”？这是有原因的。简而言之，它是为自定义属性提供一种方法用于任何预处理器。通过这种方式，我们可以提供和使用自定义属性，并且预处理器将不会编译它们，将会直接输出CSS属性。你可以在本重用预处理器变量，这将在后面的内容中会阐述。关于名字： 它为他们的想法和目的非常相似，有时候自定义属性又被称之为CSS变量，尽管正确的名字是 ...继续阅读 (27)

前面的课程我们学习的都是如何在Canvas中绘制图形，但很多时候，除了绘制图形之外还有很多情景要同文本打交道。不过在Canvas中到目前为止只提供了一些必备的基本功能，例如文本的描边与填充，向Canvas之中放置文本，以及用像素为单位来计算任意字符串的宽度等。接下来的内容，我们就来了解在Canvas中怎么绘制文本以及一些基本的操作。Canvas的绘图环境对象提供了两种方法来渲染文本：fillText(text, x, y, [maxWidth])：绘制填充文本strokeText(text, x, y, [maxWidth])：绘制描边文本在Canvas中同样提供了类似CSS的一些font属性，用来修饰在Canvas中绘制的文本，比如:font = value：用来修饰绘制文本的样式，类似于CSS中的fonttextAlign = value：文本对齐设置textBaseline = value： 文本基线对齐设置direction = value： 文本方向的设置除此之外，很多时候我们还需要对已绘制文本宽度的度量，在Canvas中提供了一个measureText(text)方法，该方法所返回的对象中，包含一个名为width的属性，它的值代表你传递给该方法的文本所占据的宽度。在接下来的内容，我们将详细的针对上述内容做相关的阐述。文本的填充和描边在Canvas中的CanvasRend ...继续阅读 (29)

到今天这节是有关于在Canvas中绘制图形部分的最后一篇文章。从前面的文章中我们了解到，通过Canvas中的CanvasRenderingContext2D对象中的属性和方法，我们可以很轻松的绘制出一些基本图形，比如直线、弧线、矩形、圆形、三角形等。但有很多基本图形的绘制是没有现成的方法，需要通过CanvasRenderingContext2D对象中的属性和方法组合在一起才能绘制出来，比如说点划线、箭头和正多边形等。为了更好的帮助大家在Canvas中绘制这些基本图形，可以将这些基本图形的绘制封装起来。今天这篇文章，我们主要来看看怎么将这些函数封装。回忆前面的内容Canvas学习系列到目前为止已整理的都是关于基本图形绘制相关的知识，主要涵盖：Canvas入门准备Canvas里的坐标系统Canvas坐标变换Canvas自定义的坐标变换Canvas绘制线段Canvas线型Canvas状态：save()和restore()Canvas绘制矩形Canvas绘制圆和圆弧Canvas绘制贝塞尔曲线Canvas绘制虚线和圆点线Canvas绘制箭头Canvas绘制正多边形如果您和我一样初次接触Canvas，建议您先花一定的时间阅读上面这些文章，有助于您更好的理解下面的内容。Canvas绘图相关属性和方法元素有一个getContext()方法，这个方法可以用来获取上下文和它的绘画功能。getConte ...继续阅读 (33)

瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了，我最早知道这个名词的时候大约是在2012年，当时Pinterest网站的布局就是使用的这种流式布局，简言之像Pinterest网站这样的布局就称之为瀑布流布局，也有人称之为Pinterest 布局。瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。还是上张图来看看我们说的瀑布流布局是什么样子。当初要实现这样的布局都是依赖于JavaScript来实现，所以当时出现过很多实现瀑布流布局的插件。比如Masonry、Isotope等都是非常有名的插件。但使用纯CSS来实现，当时还是非常困难的，不管是使用float还是inline-block布局都无法很好的控制列表项目堆栈之间的间距。最终得到的效果就像下面这样：现在距离2012年已经过去了五个年头，CSS的技术更新也是日新月异，在这几年当中出现了很多新的布局方法，比如多列布局multi-columns、Flexbox布局以及今年浏览器支持有Grid布局。早前在《CSS布局的未来》一文中有对这些布局做过阐述。既然CSS的布局有这么多的变化，那么今天有没有不借助任何JavaScript（纯CSS方案）能否实现瀑布流布局 ...继续阅读 (27)

相对于Web坐标系统而言Canvas里的坐标系统较为复杂一些，除了默认的坐标系统之外还有坐标变换概念。在上一节中，已经了解了如何使用scale()、rotate()和translate()方法来变换坐标系。这三个方法提供了一种简便的手段，用于操作绘图环境对象的变换矩阵（Transformation Matrix）。默认情况下，这个变换矩阵就是单位矩阵（Identity Matrix），它并不会影响所要绘制的物体。当调用了scale()、rotate()或translate()方法之后，变换矩阵就会被修改，从而也会影响到所有后续的绘图操作。在大多数情况之下，这三个方法就足够用了，不过，有些时候可能需要自己直接操作变换矩阵。比方说，如果要对所绘对象进行“错切”（Shear），那么就没有办法通过组合运用这三个方法来达成此效果。在这种情况下，就必须直接操作变换矩阵了。这一节，我们就一起来了解Canvas中的矩阵变换。矩阵变换Canvas的矩阵变换又称为自定义的坐标变换。Canvas的绘图环境对象（CanvasRenderingContext2D）提供了两个可以直接操作变换矩阵的方法：CanvasRenderingContext2D.transform：在当前的变换矩阵之上叠加运用另外的变换效果CanvasRenderingContext2D.setTransform：将当前的变换矩阵设置为 ...继续阅读 (39)

在Canvas里的坐标系统一节中，了解到Canvas的坐标系统如下图所示，它以Canvas画布的左上角为原点（也就是(0,0)），x坐标向右方增长，而y坐标则向下方延伸。然而，Canvas的坐标系统并不是一尘不变的。可以对Canvas坐标系统进行移动、旋转和缩放等操作。而这些操作被称为坐标变换。如下图所示：在很多场景中，Canvas的坐标变换可以让我们的操作变得更简单，更灵活。今天这节我们主要来了解Canvas中的坐标变换相关的知识。移动Translating先来看坐标变换中的移动，即translate方法，它用来移动Canvas和它的原点到一个不同的位置。ctx.translate(x, y)translate方法接受两个参数。x是左右偏移量，y是上下偏移量。当偏移量操作出Canvas的width或height时，坐标将会移出Canvas的画布，这个时候你绘制的东西都将看不到。来看一个移动的示例。为了后面更好的介绍坐标的变换，我先绘制一个坐标系统：function drawGrid(ctx, w, h, stroke, steps){ ctx.save(); ctx.beginPath(); for (var i = 0.5; i < w; i += steps) { ctx.moveTo(i, 0); ctx.lineTo(i, ...继续阅读 (46)

到目前为止，我们了解了如何在Canvas中绘制线段、矩形、圆或圆弧线和贝塞尔曲线等。这些都是Canvas的CanvasRenderingContext2D对象自身提供绘制基本图形。但是，我们肯定需要在Canvas中绘制除此之外的其他图形，比如前面所说的绘制箭头或者说我们今天要聊的绘制正多边形。正多边形维基百科上是这样描述的：正多边形是所有角都相等、并且所有边都相等的简单多边形，简单多边形是指在任何位置都不与自身相交的多边形。正多边形的特性正n边形每个内角为(1 - 2 / n) * 180或者表示为(n - 2) * 180 / n角度。也可以用弧度表示为(n - 2) * π / n或者(n - 2) / 2n。正多边形的所有顶点都在同一个外接圆上，每个正多边形都有一个外接圆，这也称为圆内接正多边形。把一个圆分成相等的一些弧，就可以得到这个圆的内接正多边形（Regular Polygon），这个圆就是正多边形的外接圆。外接圆的圆心叫做这个正多边形的中心，外接圆的半径叫做正多边形的半径（Radius），正多边形每一边所对的圆心角叫做正多边形的中心角（圆心角，Central Angle），中心到正多边形的一边的距离叫做正多边形的边心距（Apothem）。一个圆的圆周是2π，当边的数目为n时，每一个中心角都是2π / n。半径r、边心距a、边长s都存在着固定的关系，已知其中的两个，都可 ...继续阅读 (35)

在绘制圆和圆弧一节中，了解到在Canvas中可以使用arc()和arcTo()绘制制圆或弧线，但很多时候，仅这两个方法还不能满足我们实际的需求，特别是绘制复杂的曲线。不过值得庆幸的是，在Canvas中还提供了其他的方法可以帮助我们绘制复杂的曲线。那就是我们今天要说的贝塞尔曲线，在Canvas中提供了两个独立的方法：quadraticCurveTo()和bezierCurveTo()方法。这两个方法就是贝塞尔曲线。贝塞尔曲线相信很多同学都知道“贝塞尔曲线”这个词，我们在很多地方都能经常看到。但是，可能并不是每位同学都清楚地知道，到底什么是“贝塞尔曲线”，又是什么特点让它有这么高的知名度。贝塞尔曲线的数学基础是早在 1912 年就广为人知的伯恩斯坦多项式。但直到 1959 年，当时就职于雪铁龙的法国数学家Paul de Casteljau才开始对它进行图形化应用的尝试，并提出了一种数值稳定的de Casteljau 算法。然而贝塞尔曲线的得名，却是由于 1962 年另一位就职于雷诺的法国工程师Pierre Bézier的广泛宣传。他使用这种只需要很少的控制点就能够生成复杂平滑曲线的方法，来辅助汽车车体的工业设计。正是因为控制简便却具有极强的描述能力，贝塞尔曲线在工业设计领域迅速得到了广泛的应用。不仅如此，在计算机图形学领域，尤其是矢量图形学，贝塞尔曲线也占有重要的地位。今天我们最常见的 ...继续阅读 (32)

想要在你的网站有一个好看的渐变背景吗？background-image:linear-gradient(red,blue)，就能很轻易的实现一个red至blue的渐变背景图片。就是这么的简单。感觉老话重提，有点无聊。如果您想了解更多这方面的知识，建议你阅读以前整理过的相关文章。我也推荐css-tricks和MDN上的相关文章。还在这里吗？好了，让我们看一些linear-gradient实际上工作的一些细节，从而更好的理解它是如何工作的。首先了解linear-gradient的语法：linear-gradient([| to]? ,)这个函数（特性）接受的第一个参数是渐变的角度，他可以接受一个表示角度的值（可用的单位deg、rad、grad或turn）或者是表示方向的关键词（top、right、bottom、left、left top、top right、bottom right或者left bottom）。第二个参数是接受一系列颜色节点（终止点的颜色）。渐变容器（渐变框）一个渐变图像和传统的背景图像不一样，它是没有维度（尺寸限制），它是无限的。那么决定渐变图像可见区域是由渐变容器大小来决定的。通常，如果给一个DOM元素的background-image使用linear-gradient，那么其（渐变）显示区域就是元素的border-box区域（如果不了解元素的border-box区 ...继续阅读 (23)

起因对于Flex布局，阅读了 大漠老师和其他老师写的文章后，我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下，我去查阅Flexbox 的 W3C 规范文档。注：本篇博文不适合未接触过Flex 布局的人, 如果想了解flex 布局基础。请参考理解Flexbox：你需要知道的一切对于flex盒模型的设计期望flex盒模型是被期望设计成：在任何流动的方向上(包括上下左右)都能进行良好的布局可以以逆序 或者 以任意顺序排列布局可以线性的沿着主轴一字排开 或者 沿着侧轴换行排列可以弹性的在任意的容器中伸缩大小（今天重点研究的主题）可以使子元素们在容器主轴方向上 或者 在容器侧轴方向上 进行对齐可以动态的沿着主轴方向伸缩子级的尺寸，与此同时保证父级侧轴方向上的尺寸主轴和侧轴很有必要先向大家解释清楚 3个问题什么是主轴什么是侧轴他们是如何切换的首先每一根轴都包括 三个东西：维度、方向、尺寸什么意思呢？所谓的维度实际上就是意思就是子元素 横着排还是竖着排(x轴 或y轴）方向 即排列子元素的顺序 顺序还是逆序尺寸 即width[height] ：每一个子元素在主轴方向所占的位置的总和如果主轴是水平的，那么尺寸就是父元素内所有item的outerWidth总和,如果主轴是垂直的，那么尺寸就是父元素的outerHeight主轴是依靠flex-directio ...继续阅读 (40)

在这篇文章中主要来聊在Canvas中怎么绘制箭头。在Canvas的CanvasRenderingContext2D对象中是没有提供绘制箭头的方法，言外之意，在Canvas中要绘制箭头是需要自己封装函数来处理。那今天的主题就是来看怎么封装绘制箭头的函数。了解一些基础知识平常我们常常看到的一些箭头样式如下图所示：在绘制箭头最关键之处就是处理箭头：其包括几个部分：一条直线，从起点P1到终点P2终点P2向这条直线两侧扩展，将会产生一个P3和P4点另外P2P3或者P2P4构成箭头斜线率箭头斜线和直线有一个夹角theta（θ）指定箭头的长度d从上图上我们可以看出，控制一个箭头，可以通过这几个参数来控制：起点P1（(fromX, fromY)）终点P2（(toX, toY)）斜线率headlen夹角theta（θ）对于箭头的P3和P4点，我们就需要通过相应的三角函数计算得来。那么P3的坐标可以轻易计算出来：p3[0] = P2[0] - Math.cos(θ * Math.PI / 180); // P3对应的X坐标 p3[1] = p2[1] - Math.sin(θ * Math.PI / 180); // P3对应的Y坐标用同样的方法可以计算出P4坐标:p4[0] = P2[0] - Math.cos(θ * Math.PI / 180); // P4对应的X坐标 p3[1] = p2[1 ...继续阅读 (25)

圆和圆弧是图形中基本图形之一，今天我们来了解在Canvas中怎么绘制圆和圆弧。在Canvas中绘制圆和圆弧其实和绘制线段和矩形一样的简单。在Canvas中，CanvasRenderingContext2D对象提供了两个方法（arc()和arcTo()）来绘制圆和圆弧。与圆和圆弧相关的基础知识在学习如何绘制圆和圆弧之前，有一些相关的基础知识有必要先进行了解。角度旋转角度和弧度正切角度旋转在坐标系中，旋转分为顺时针和逆时针两个方向旋转：角度和弧度在CSS中，做旋转常用到的都是角度（deg）。但在Canvas中绘制圆或圆弧时用到的是弧度（rad）。维基百科中是这样描述弧度的：弧度又称弪度，是平面角的单位，也是国际单位制导出单位。单位弧度定义为圆弧长度等于半径时的圆心角。角度以弧度给出时，通常不写弧度单位，或有时记为rad。一个完整的圆的弧度是2π，所以2π rad = 360°，1 π rad = 180°，1°=π/180 rad，1 rad = 180°/π（约57.29577951°）。以度数表示的角度，把数字乘以π/180便转换成弧度；以弧度表示的角度，乘以180/π便转换成度数。rad = (π / 180) * deg同样的：deg = (rad * 180) / π平时我们常看到的各种弧度如下：JavaScript中弧度角度换算仅难了解角度和弧度之间的关系是不够的，我们还需 ...继续阅读 (37)