小碎石

摘要： JavaScript中的Number对象是经过封装的能够让你处理数字值的对象，Number对象是由Number()构造器创建的 语法 new Number(value); 属性 方法 Number.isNaN(value) (ES6新增) 用来检测传入的值是否为NaN,返回布尔值. 因为NaN==N 阅读全文

摘要： 技巧：通过变形属性对容器的形状进行变形，但是保持其内容不变形。 场景：通过skew()变形属性对一个按钮形状的平行四边形进行斜向拉伸。 有几套备选方案： 1. 嵌套元素方案 外部容器元素进行skew()变形，再对内部内容区域元素进行一次反向的skew()变形，这样内容区域会保持原来的形状。 2. 伪 阅读全文

摘要： 技巧：利用border-radius属性产生圆，椭圆等形状 border-radius按照顺序依次设定border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-rad 阅读全文

摘要： 技巧：通过一个DIV标签实现边框内圆角效果 背景知识：box-shadow, outline, “多重边框” 背景知识讲解 1. box-shadow box-shadow以逗号分隔列表来描述一个或多个阴影效果，几乎可以用在任何元素上(英文all elements. it also applies 阅读全文

摘要： 技巧：可以随意的摆放背景图片的位置 背景知识：在CSS2.1时代，我们只能通过background-position设置图片相对于容器左上角的偏移量，这样当容器的尺寸不固定时，只能近视使用百分比实现。那么在CSS3时代，我们有了更好的解决方案。 CSS3时代，background-position属 阅读全文

摘要： 技巧：实现一个半透明的边框 预备知识 background-clip background-clip 设置元素背景是否延伸到边框下面，如果没有设置背景颜色或者图片，那么这个属性只有在边框设置为透明或者半透明时才能看到视觉效果。否则这个属性造成的样式变化会被元素边框所覆盖。 默认值为 border-b 阅读全文

摘要： 学习目的：通过JavaScript操控<canvas>对象，实现交互动画。 动画的基本步骤 1. 清空canvas，使用clearRect方法 2. 保存canvas状态 3. 绘制动画图形 4. 恢复canvas状态 操控动画Controlling an animation setInterval 阅读全文

摘要： 学习目的：使用变形：移动，旋转，缩放栅格，创造出更强大的图形。 状态的保存与恢复Saving and restoring state canvas的状态就是当前画面应用的所有样式和变形的一个快照，canvas的状态被存储在栈中，每当save方法被调用后，当前状态就会被推送到栈中保存。 状态信息包括： 阅读全文

摘要： 学习目的：学会使用色彩，透明度，线型，渐变，图案和阴影绘制更加吸引人的内容 色彩Color fillStyle = color 设置图形的填充颜色 strokeStyle = color 设置图形的轮廓颜色 color的值可以是字符串，渐变对象或者图案对象，默认情况下，两者都是黑色#000 var 阅读全文

摘要： 学习目的：在Canvas上绘制矩形，三角形，直线，圆弧，曲线 栅格 栅格canvas grid，canvas元素默认被网格覆盖，栅格的起点是左上角坐标(0,0)，元素的位置都是相对于栅格起点来定位的。 绘制矩形 API提供了三种方法绘制矩形 fillRect(x, y, width, height) 阅读全文