Clik here to view.
text-stroke实现文本描边效果
早期在Web中要实现文本描边效果是没有直接的CSS属性可以实现的。一般都是通过其他的CSS属性来模拟需要的描边效果。最常见的就是使用text-shadow。当然，在SVG或者Canvas中实现文本描述效果相对而言是要较为轻松。那么今天咱们就来看看如何在Web中实现文本描述效果。text-shadow实现文本描边text-shadow是实现Web描述效果中最为常见的一种方案，简单的原理就是在文本的上、...
View Article【转载】你所不知道的setInterval
本文转载@晚晴幽草轩轩主的《你所不知道的setInterval》，如需转载，烦请注明原文出处：http://www.jeffjade.com/2016/01/10/2016-01-10-javaScript-setInterval/。在《你所不知道的setTimeout()》记载了setTimeout()相关,此篇则整理了下setInterval()；作为拥有广泛应用场景(定时器，轮播图，动画效果，...
View ArticleClik here to view.
Canvas学习：Canvas入门准备
由于工作的需要，最近开始在学习HTML5的canvas相关的知识。这里主要记录自己学习canvas相关的知识笔记。如果文章有不对之处，还请大婶们多多指正。今天这篇文章是学习canvas的一些准备工作。canvas元素<canvas>也是HTML中的一个元素，可以给这个元素添加一些HTML属性，比如使用width和height来控制其大小，也可以通过style给它设置一些基本样式。同样也可...
View ArticleClik here to view.
Canvas学习：Canvas里的坐标系统
上一节我们做好了使用Canvas的准备工作，但并没有深入的介绍如何使用Canvas，比如怎么绘制图形，怎么做Canvas动画等。但并不用着急，随着我们后面的深入学习，这一切都会知道的。在深入学习之前，我们有必要先了解Canvas里的坐标系统。那么这一节，就先来了解Canvas的坐标系统。笛卡坐标系在数学里，我们学过一种坐标系统，叫作笛卡坐标系（Cartesian Coordinate...
View ArticleClik here to view.
Canvas学习：绘制线段
在上一篇介绍Canvas坐标系统的结尾处，我们使用了Canvavs绘制了一个网格。整个效果是由直线和文本构成。在这一节中，我们来看看如何使用Canvas绘制线段。在Canvas中，线段也是路径中的一种，被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个方法。先画一条简单的直线Canvas画一下直线非常的容易。众所周之，两点就能构...
View ArticleClik here to view.
Canvas学习：绘制虚线和圆点线
上一节中，使用moveTo()、lineTo()和stroke()可以很轻易的在Canvas中绘制出实线（线段）。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇，那么要在Canvas中绘制虚线和圆点线又要怎么绘制，在Canvas有没有类似的API能直接绘制呢？其实我也很好奇，看了一些资料，要像绘制实线那样简单或者直接，相对来说是没有的，但不用担心，通过其他的方法也是可以实现的。因为Jav...
View ArticleClik here to view.
Canvas学习：线型
在绘制线段一文中，了解到如何在Canvas中绘制线段。虽然使用Canvas中API可以很轻松的绘制出线段，但里面还是有不少的细节需要了解。这篇文章咱们就来了解线段中的线型。Canvas中的线型主要包括线宽、线段端点和线段连接点三个部分。那么咱们先来了解线宽。线宽通过前面的示例，我们不难发现，在Canvas中通过lineWidth属性来定义线段的粗细。我们可以给其明确指定一个value值，在没有显式设...
View ArticleClik here to view.
Canvas学习：save()和restore()
本来今天想开始学习怎么在Canvas中绘制矩形。但昨天发朋友圈，聊到Canvas。有网友提醒我将所有绘制的东西放在ctx.save()和ctx.restore()，能起到保存绘制状态和防止污染状态栈。养成一个良好的习惯。此时一脸蒙逼！因为我并不知道这两个东东是什么意思，怎么使用？后来翻了书，也只是提到了在Canvas中有save()和restore()两个方法，它们都是属于Canvas中Canvas...
View ArticleClik 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.
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 Article