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

瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了，我最早知道这个名词的时候大约是在2012年，当时Pinterest网站的布局就是使用的这种流式布局，简言之像Pinterest网站这样的布局就称之为瀑布流布局，也有人称之为Pinterest 布局。

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

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

今天我们来介绍CSS中的一个新属性flow-root。这个属性是CSS Display Module Level3中的一个属性。简单讲这个属性是display中的一个新属性，对于display属性，大家熟悉的可能是常见的几个属性，比如block、inline、inline-block、flex、grid、table和table-cell等，其实除了这些常见的属性值之外，还有很多其他的值。如果想了解更多，那可以点击这里阅读。

自从去年下半年开始，CSS Grid布局的相关教程在互联网上就铺天盖地，可谓是声势浩大。就针对于Web布局而言，个人认为Grid布局将是Web布局的神器，它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式，而Grid最大的特色，采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。

了解CSS的同学都应该知道，CSS是由Cascading Style Sheets三个单词首字母组成，简单的讲就是层叠样式表。事实上，在CSS中，层叠（也有同学称之为级联）也是一个非常基础，但也是一个非常重要的概念。只有理解了层叠这个概念才能更好的理解和使用CSS中的每一个属性。话又说回来，既然是一个基础概念，懂CSS的同学都知道，那还有必要来说这个吗？那我就得问一下了，你真的懂CSS中的层叠，能使用好CSS的层叠吗？如果你没有这方面的自信，那不仿花点时间来阅读这篇文章。

2014年@Marcin Wichary在Medium分享了如何更好的突出链接的下划线效果，@Mary Lou更疯狂的制作出了一个Demo，这个Demo展示了多种突出链接的效果，有些是使用的背景色，有些是使用不同的下划线方式。那么，接下来我们一起看看在Web中，如何更好的美化下划线的效果。

流体排版这一词似乎看上去有点陌生，在英文中常把他称之为Fluid Typography，当然也有很多朋友称之为流体字号（Fluid Size）。大概的意思就是Web排版中的font-size会根据浏览器窗口的大小自动改为。

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