Clik here to view.
Canvas学习：绘制矩形
通过前面教程的学习，我们可以在Canvas中轻易绘制路径（线段）。这仅仅是Canvas中的一小部分，今天我们来看看在Canvas中怎么绘制矩形。绘制矩形的方法在Canvas中提供了绘制矩形的API：fillRect(x, y, width, height)：绘制一个填充的矩形strokeRect(x, y, width, height)：绘制一个矩形的边框clearRect(x, y, width,...
View ArticleClik here to view.
Canvas学习：绘制圆和圆弧
圆和圆弧是图形中基本图形之一，今天我们来了解在Canvas中怎么绘制圆和圆弧。在Canvas中绘制圆和圆弧其实和绘制线段和矩形一样的简单。在Canvas中，CanvasRenderingContext2D对象提供了两个方法（arc()和arcTo()）来绘制圆和圆弧。与圆和圆弧相关的基础知识在学习如何绘制圆和圆弧之前，有一些相关的基础知识有必要先进行了解。角度旋转角度和弧度正切角度旋转在坐标系中，旋...
View ArticleClik here to view.
Canvas学习：绘制箭头
在这篇文章中主要来聊在Canvas中怎么绘制箭头。在Canvas的CanvasRenderingContext2D对象中是没有提供绘制箭头的方法，言外之意，在Canvas中要绘制箭头是需要自己封装函数来处理。那今天的主题就是来看怎么封装绘制箭头的函数。了解一些基础知识平常我们常常看到的一些箭头样式如下图所示：在绘制箭头最关键之处就是处理箭头：其包括几个部分：一条直线，从起点P1到终点P2终点P2向这...
View ArticleClik here to view.
深入理解 flex 布局以及计算
起因对于Flex布局，阅读了 大漠老师和其他老师写的文章后，我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节。在大漠老师的帮助下，我去查阅Flexbox 的 W3C 规范文档。注：本篇博文不适合未接触过Flex 布局的人, 如果想了解flex...
View ArticleClik here to view.
你真的理解CSS的linear-gradient？
想要在你的网站有一个好看的渐变背景吗？background-image:linear-gradient(red,blue)，就能很轻易的实现一个red至blue的渐变背景图片。就是这么的简单。感觉老话重提，有点无聊。如果您想了解更多这方面的知识，建议你阅读以前整理过的相关文章。我也推荐css-tricks和MDN上的相关文章。还在这里吗？好了，让我们看一些linear-gradient实际上工作的一...
View ArticleClik here to view.
Canvas学习：贝塞尔曲线
在绘制圆和圆弧一节中，了解到在Canvas中可以使用arc()和arcTo()绘制制圆或弧线，但很多时候，仅这两个方法还不能满足我们实际的需求，特别是绘制复杂的曲线。不过值得庆幸的是，在Canvas中还提供了其他的方法可以帮助我们绘制复杂的曲线。那就是我们今天要说的贝塞尔曲线，在Canvas中提供了两个独立的方法：quadraticCurveTo()和bezierCurveTo()方法。这两个方法就...
View ArticleClik here to view.
Canvas学习：绘制正多边形
到目前为止，我们了解了如何在Canvas中绘制线段、矩形、圆或圆弧线和贝塞尔曲线等。这些都是Canvas的CanvasRenderingContext2D对象自身提供绘制基本图形。但是，我们肯定需要在Canvas中绘制除此之外的其他图形，比如前面所说的绘制箭头或者说我们今天要聊的绘制正多边形。正多边形维基百科上是这样描述的：正多边形是所有角都相等、并且所有边都相等的简单多边形，简单多边形是指在任何位...
View ArticleClik here to view.
Canvas学习：坐标变换
在Canvas里的坐标系统一节中，了解到Canvas的坐标系统如下图所示，它以Canvas画布的左上角为原点（也就是(0,0)），x坐标向右方增长，而y坐标则向下方延伸。然而，Canvas的坐标系统并不是一尘不变的。可以对Canvas坐标系统进行移动、旋转和缩放等操作。而这些操作被称为坐标变换。如下图所示：在很多场景中，Canvas的坐标变换可以让我们的操作变得更简单，更灵活。今天这节我们主要来了解...
View ArticleClik here to view.
Clik here to view.
Clik here to view.
Canvas学习：图像合成
合成是指如何精细控制画布上对象的透明度和分层效果。在默认情况之下，如果在Canvas之中将某个物体（源）绘制在另一个物体（目标）之上，那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。事实上，它和CSS中的混合模式非常的类似。简单点讲，在Canvas中，把图像源和目标图像，通过Canvas中的globalCompositeOperation操作，可以得到不同的效果，比如下图：正如上图，红苹果...
View ArticleClik here to view.
Canvas学习：裁切clip()
上一节中学习了Canvas的图像合成，通过图像合成的技术可以轻易的实现类似于刮刮卡的效果，其实除了实现刮刮卡的效果之外，还可以使用这种技术制作类似于探照灯的效果。前面也说过了，Canvas中的图像合成非常类似于CSS中的混合模式，也类似于一些设计软件中的图层合层。但就上面的探照灯的效果，其又有点像是CSS的遮罩。其实在Canvas中，除了使用图像合成之外能实现上面的探照灯的效果之外，还可以使用Can...
View ArticleClik here to view.
CSS Animations vs Web Animations API
上周，我写了一篇关于如何使用CSS制作bitsofcode logo的动画效果。之后收到一些建议，尝试比较一下CSS动画和Web Animations API。所以今天写了这篇文章。Web Animations API简介和上周一样，我开始介绍Web Animations API。 Web Animations...
View ArticleClik here to view.
Web中如何实现纵横比
Web发展到现在，已经有很大的变化，特别在当前这样的时代，我们面对的设备种类繁多。言外之意，这样的环境之下，Web的页面布局时常会碰到一些缩放比例的控制，特别是针对img、iframe、object、video和embed等元素的比例缩放。当然，就img元素而言，要实现纵横比例的布局已有多种方案，而且实战性也特别的强，并且在Responsive设计中已使用广泛。既然img可以实现，那其他元素ifra...
View ArticleClik here to view.
如何使用CSS Grid布局实现限宽容器全屏效果
在Web的布局设计中时常会碰到全屏的效果，而且很多时候会碰到在限制宽度的容器中实现全屏效果。比如下图的效果：在以前面对这样的效果，最好的解决方案是能过HTML的结构来做一定的处理。比如：<div class="banner"> <div class="container"></div> </div>...
View ArticleClik here to view.
Canvas学习：渐变
通过前面的Canvas学习，了解到在Canvas中绘制图形时，使用strokeStyle和fillStyle来设置绘制图形的边框颜色和填充颜色。前面的教程我们看到的都是给这两个属性设置具体的颜色值，比如#fff、red之类。其实在Canvas中，除了给strokeStyle和fillStyle设置颜色之外，还可以设置渐变色。今天我们要学习的就是Canvas中的渐变知识。Canvas中的渐变和CSS的...
View ArticleClik here to view.
线性插值
最近在看Canvas的一些动画实例当中，时常看到lerp()这个函数，一直以来并不知道这个函数起什么作用，有什么特性。今天花了一些时间，Google了一下，才知道这个函数是线性插值。那么线性插值是个什么鬼？他在一些程序中又起啥作用？这就是这篇文章要探讨和学习的。什么是线性插值线性插值是数学、计算机图形学等领域广泛使用的一种简单插值方法。在平常实际运用当中，把插值称之为lerp。简单而言：lerp是两...
View ArticleClik here to view.
理解动画中的线性插值
在传统（手绘）一个高级动画或者动画艺术家都喜欢绘制关键帧来定义一个动画。现场传递给助理，一般是实习生或者初级艺术家在此基础上做一些其他性的工作，具体的说，他们就是在关键帧动画之间添加一些中间片段让动画看起来更流畅，更自然。他们可以不考虑或者不讨论动画的中间帧。但绘制动画的中间帧是很有必要的，或者说这方面的工作是繁重的。但这是二十世纪之间的艺术家们做的事情，在今天这些事情都是让计算机来处理这些繁重的任...
View ArticleClik here to view.
学习CSS Grid
CSS Grid是一个强大的工具，它允许在Web上创建二维布局。这一篇学习CSS Grid的指南，通过图形的方式帮助您更好的理解和学习CSS Grid。花时间整理和阅读这篇文章都是非常有意义的。我们要特别感谢Mozilla开发人员和W3C规范中有关于CSS Grid的资源。同时也需要特别感谢@Jen Simmons和@Rachel Andrews两位女士，她们是CSS...
View ArticleClik here to view.