整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
文作者：HelloGitHub-kalifun
今天给大家推荐一个使用 JavaScript 语言编写的开源 Web 3D 模型项目 —— Zdog。
一、介绍
1.1 Zdog
Zdog 项目地址：https://github.com/metafizzy/zdog
Tips: 本文出现的所有作品都是通过 Zdog 完成的。
圆形、扁平、设计师友好用于 canvas 和 SVG 的伪 3D 引擎。
使用 Zdog 您可以在 Web 上设计和渲染简单的 3D 模型。Zdog 是一个伪 3D 引擎。它的几何形状存在于 3D 空间中，但呈现为扁平形状，这使 Zdog 特别。
1.2 Zdog 特点
二、方法介绍
解释说明均在代码中以注释方式展示，请大家注意阅读。
2.1 初始静态演示
让我们进入一个基本的非动画演示。
静态演示只需要在画布上将想要绘画的图像渲染出来就可以了。
// Illustration是顶级类，用于处理<canvas>或<svg>元素，保存场景中的所有形状，并在元素中显示这些形状。
let illo=new Zdog.Illustration({
// 用class选择器设置画布
element: '.zdog-canvas',
});
?
// 画圆
new Zdog.Ellipse({
// 将形状添加到illo
addTo: illo,
// 设置圆的直径
diameter: 80,
// 设置画笔宽度
stroke: 20,
// 设置圆的颜色
color: '#636',
});
?
// 更新所有显示属性并渲染到illo画布上
illo.updateRenderGraph();
2.2 动画
为实现动画场景，我们需要每帧重新渲染图形在画布上。
let illo=new Zdog.Illustration({
// 用id选择器设置画布
element: '#zdog-canvas',
});
?
// 画圆
new Zdog.Ellipse({
addTo: illo,
diameter: 80,
// 你可以理解z轴向前移动40个像素
translate: { z: 40 },
stroke: 20,
color: '#636',
});
?
// 画矩形
new Zdog.Rect({
addTo: newcanvas,
width: 80,
height: 80,
// 你可以理解z轴向后移动40个像素
translate: { z: -40 },
stroke: 12,
color: '#E62',
fill: true,
});
?
function animate() {
// 通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。
illo.rotate.y +=0.03;
illo.updateRenderGraph();
// 动画下一帧继续执行函数
requestAnimationFrame( animate );
}
// 开始动画，执行函数
animate();
2.3 放大
Zdog 需要设置大量数字。设置 zoom 将按比例缩放整个场景。
// Illustration是顶级类，用于处理<canvas>或<svg>元素，保存场景中的所有形状，并在元素中显示这些形状。
let illo2=new Zdog.Illustration({
// 用class选择器设置画布
element: '.zdog-canvas2',
// 将图形放大4倍
zoom: 4,
});
// 画圆
new Zdog.Ellipse({
// 将形状添加到illo2
addTo: illo2,
// 设置圆的直径
diameter: 80,
// 设置画笔宽度
stroke: 20,
// 设置圆的颜色
color: '#636',
});
?
// 更新所有显示属性并渲染到illo画布上
illo2.updateRenderGraph();
2.4 拖动旋转
通过在插图上设置 dragRotate：true 来拖动来启用旋转。
let newcanvas2=new Zdog.Illustration({
// 用id选择器设置画布
element: '#zdog-canvas2',
dragRotate: true,
});
?
// 画圆
new Zdog.Ellipse({
addTo: newcanvas2,
diameter: 80,
// 你可以理解z轴向前移动40个像素
translate: { z: 40 },
stroke: 20,
color: '#636',
});
?
// 画矩形
new Zdog.Rect({
addTo: newcanvas2,
width: 80,
height: 80,
// 你可以理解z轴向后移动40个像素
translate: { z: -40 },
stroke: 12,
color: '#E62',
fill: true,
});
?
function animate2() {
// 通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。
newcanvas2.rotate.y +=0.03;
newcanvas2.updateRenderGraph();
// 动画下一帧继续执行函数
requestAnimationFrame( animate2 );
}
// 开始动画，执行函数
animate2();
三、快速入手
下面我们将一步步的讲解如何使用 Zdog 这个库。我们采用的是最简单的 CDN 引用方式，方便大家能够快速体检其魅力（复制代码便可查看效果）。
Tips： 解释说明均在代码中以注释方式展示，请大家注意阅读。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zdog</title>
<style type="text/css">
.zdog-canvas {
/*给class="zdog-canvas"的画布添加背景*/
background: #FDB;
}
</style>
</head>
<body>
<!--Zdog在<canvas>或<svg>元素上呈现。-->
<!--设置画布1，及长宽-->
<canvas class="zdog-canvas" width="240" height="240"></canvas>
<!--设置画布2，及长宽-->
<canvas id="zdog-canvas" width="240" height="240"></canvas>
<!--引入zdog文件-->
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script>
// Illustration是顶级类，用于处理<canvas>或<svg>元素，保存场景中的所有形状，并在元素中显示这些形状。
let illo=new Zdog.Illustration({
// 用class选择器设置画布
element: '.zdog-canvas',
});
?
// 画圆
new Zdog.Ellipse({
// 将形状添加到illo
addTo: illo,
// 设置圆的直径
diameter: 80,
// 设置画笔宽度
stroke: 20,
// 设置圆的颜色
color: '#636',
});
?
// 更新所有显示属性并渲染到illo画布上
illo.updateRenderGraph();
?
?
let newcanvas=new Zdog.Illustration({
// 用id选择器设置画布
element: '#zdog-canvas',
});
?
// 画圆
new Zdog.Ellipse({
addTo: newcanvas,
diameter: 80,
// 你可以理解z轴向前移动40个像素
translate: { z: 40 },
stroke: 20,
color: '#636',
});
?
// 画矩形
new Zdog.Rect({
addTo: newcanvas,
width: 80,
height: 80,
// 你可以理解z轴向后移动40个像素
translate: { z: -40 },
stroke: 12,
color: '#E62',
fill: true,
});
?
function animate() {
// 通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。
newcanvas.rotate.y +=0.03;
newcanvas.updateRenderGraph();
// 动画下一帧继续执行函数
requestAnimationFrame( animate );
}
// 开始动画，执行函数
animate();
</script>
</body>
</html>
第一个画布是初始静态演示，第二个画布是动画，第三个画布是由第一个画布放大，第四个画布是通过拖动实现不规则旋转。
四、总结
Zdog 可以设计和显示简单的 3D 模型而不需要很多开销。这让我们成为一个灵魂画手简单了很多，如果你想给自己的网站增添色彩，不妨试试 Zdog 吧。如果各位感兴趣的话，下一期我将带领大家成为一位代码上的灵魂画手！
五、参考资料
Zdog官方文档[1]
References
[1] Zdog官方文档: https://zzz.dog/
『讲解开源项目系列』——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章，你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎留言联系、加入我们，让更多人爱上开源、贡献开源～
家好，我是Echa。
最近有不少的粉丝老铁们私信我为啥这几天没有创作新内容了，实在对不住。小编我身在广州中招羊了，我在最近一篇文章也有提到过，今天是第四天，基本上康复了，奥密克戎BA.5其实没有那么恐怖，中招了前三天特难受，熬过来了就没事了，大家莫慌。现在小编就可以认认真真的继续创作内容了。同时也非常感谢大家默默的关心我小编身体状况，非常谢谢。
创作不易，喜欢的老铁们加个关注，点个赞，后面会持续更新干货，速速收藏，谢谢！
说起 CSS 单位，我们最常用的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就来学习一下 CSS 中单位！
相对单位就是相对于另一个长度的长度。CSS中的相对单位主要分为两大类：
下面就来看看这些常见的CSS单位。
em是最常见的相对长度单位，适合基于特定的字号进行排版。根据CSS的规定，1em 等于元素的font-size属性的值。
em 是相对于父元素的字体大小进行计算的。如果当前对行内文本的字体尺寸未进行显示设置，则相对于浏览器的默认字体尺寸。当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的单位是em，那么就需要层层计算，复杂度会很高。
当然，上面的这个说法是不严谨 的。来看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent {
width: 300px;
height: 300px;
font-size: 20px;
}
.child {
border: 1em solid ;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
子元素
</div>
</div>
</body>
</html>
这里给父元素设置了字体大小为20px，然后给子元素的border宽度设置为1em，这时，子元素的border值为20px，确实是相对于父元素的字体大小设置的：
那如果我们给子元素的字体设置为30px：
.child {
font-size: 30px;
border: 1em solid ;
}
这时可以看到，子元素的边框宽度就是30px，它是相对自己大小进行计算的：
所以，可以得出结论：如果自身元素是没有设置字体大小的，那么就会根据其父元素的字体大小作为参照去计算，如果元素本身已经设置了字体，那么就会基于自身的字体大小进行计算。
em单位除了可以作用于 font-size之外，还可以运用于其他使用长度的属性，比如border-width、width、height、margin、padding、text-shadow等。
所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。
rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。来对上面的例子进行修改：
.child {
font-size: 30px;
border: 1rem solid ;
}
html {
font-size: 25px;
}
效果如下，可以看到，边框的长度变成了25px，它是根据根元素html的字体大小计算的：
如果没有对根元素设定字号的话，font-size: 1rem的作用与font-size: initial相同。
使用 em 和 rem 可以让我们灵活的够控制元素整体的放大和缩小，而不是固定大小。那何时应使用 em，何时应使用 rem 呢？可以根据两者的差异来进行选择：
ex 和 ch 都是排版用的单位，它们的大小取决于元素的font-size 和 font-family属性。
这四个单位都是视窗单位，所谓的视窗，在web端指的就是可视区域，移动端的视窗指的就是布局视窗。如果视窗大小发生了变化，那么这些值都会随之变化。这四个单位指的是：
假如一个浏览器的高度是800px，那么1vh的值就是8px。vh和vw的大小总是和视窗的高度和宽度有关。
vmin 和 vmax 与视窗宽度和高度的最大值和最小值有关。假如一个浏览器高度为500px，宽度为1200px，那么1vmin就是5px，1vmax就是12px。
这些单位都是长度单位，所以可以在任何允许使用长度单位的地方使用。这些单位比较适合用于创建全视区界面，例如移动设备的界面，因为元素是根据视区的尺寸而变化的，与文档树中的任何元素都没有关系。
在 CSS 中，绝对单位包括：px 、pt 、pc、 cm 、 mm 、in 等。绝对单位是一个固定的值，它反应了一个真实的物理尺寸。它不会受屏幕大小或者字体的影响。它们的大小取决于值以及屏幕的分辨率（DPI，每英寸的点数）。px就是我们最常用的绝对单位之一。这些绝对单位的换算关系如下：
1in=25.4mm=2.54cm=6pc=72pt=96px
px 全称为 Pixels，表示像素，它并不严格等于显示器的像素，尤其在高清屏下。尽管CSS单位会根据浏览器、操作系统或者硬件适当缩放，在某些设备或者用户的分辨率设置下也会发生变化，但是96px通常等于一个物理英寸的大小。
CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为1px。一个“600x400”解析度的照片的长宽分别为“600px”和“400px”，所以照片本身的像素并不会与显示装置像素一致，而是与 px 单位一致。如此就可以将图像完整的与网页的其它元素排列起来。
很多时候， px 也常被称为 CSS 像素。它是一个绝对单位，但也可以被视为相对单位，因为像素单位相对的是设备像素。在同一个设备上，每 1 个 CSS 像素所代表的物理像素是可以变化的；在不同的设备之间，每 1 个 CSS 像素所代表的物理像素是可以变化的。
.box {
width: 100px;
height: 100px;
}
pt 全称为 Point，表示点。常用于软件设计和排版印刷行业（笔者做的前端系统，最终的产物就是一个需要拿去印刷的PDF，所以会经常用到这个单位）。当使用这个单位时，无论显示器的分辨率是多少，打印在纸上的结果都是一样的。
如果单纯为了网页的显示，建议就使用px像素单位，如果需要输出印刷产品，就可以考虑使用pt。
pc 全程为 Picas，表示派卡。相当于我国新四号铅字的尺寸。派卡也是印刷的术语，1派卡等于12点。它和 px 的换算关系如下：
1pc=16px
cm 全称为 Centimeters，表示厘米。它和 px 的换算关系如下：
1cm=37.8px
mm 全称为 Millimeters，表示毫米。它和 px 的换算关系如下：
1mm=3.78px
in 全称为 Inches，表示英寸。它和 px 的换算关系如下：
1in=96px
CSS中的频率单位有两个：赫兹（Hz）和千赫兹（kHz）。它们的换算关系如下：
1kHz=1000Hz
通常情况下，频率单位使用在听或说级联样式表中。频率可以被用来改变一个语音阅读文本的音调。低频率就是低音，高频率就是高音。
.low {
pitch: 105Hz;
}
.squeal {
pitch: 135Hz;
}
需要注意，当数值为0时，单位对值没有影响，但是单位是不能省略的。也就是说0、0Hz、0kHz是不一样的。所以，在使用频率单位时，不要直接写0。另外，这两个单位是不区分大小写的。
CSS中的时间单位有两个：秒（s）和毫秒（ms）。这两个时间单位都是CSS新增的单位。这两个单位的换算关系如下：
1s=1000ms
时间单位主要用于过度和动画中，用于定义持续时间或延迟时间。下面两种定义是等效的：
a[href] {
transition-duration: 2.5s;
}
a[href] {
transition-duration: 2500s;
}
CSS中的分辨率单位有三个：dpi、dpcm、dppx。这三个单位都是CSS3中华新增的单位。他们都是正值，不允许为负值。这三个单位的换算关系如下：
1dppx=96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi
分辨率单位主要用于媒体查询等操作。
dpi 全称为 dots per inch，表示每英寸包含的点的数量。普通屏幕通常包含 72或96个点，大于 192dpi 的屏幕被称为高分屏。
@media screen and (min-resolution: 96dpi) { ... }
@media print and (min-resolution: 300dpi) { ... }
dpcm 全称为 dots per centimeter，表示每厘米包含的点的数量。
@media screen and (min-resolution: 28dpcm) { ... }
@media print and (min-resolution: 118dpcm) { ... }
dppx 全称为 dots per pixel，表示每像素（px）包含点的数量。由于CSS px的固定比率为1:96，因此1dppx相当于96dpi。它对应于由图像分辨率定义的CSS中显示的图像的默认分辨率。
@media screen and (min-resolution: 2dppx) { ... }
@media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }
CSS中的角度单位有四个：deg、grad、rad、turn。这些角度单位都是CSS3中新增的单位。它们的换算关系如下：
90deg=100grad=0.25turn ≈ 1.570796326794897rad
一般这些角度单位用于元素的旋转操作，包括2D旋转、3D旋转等。
通常情况下，一个完整的旋转就是360度。所以，所有的角度都在0-360度之间。但是，超出这个范围的值也是允许的，只不过都会归到0-360度之间。比如，顺时针旋转420度（450deg）、逆时针旋转270度（-270deg）、顺时针旋转90度（90deg）都是一样的效果，都会归为90deg。但是当使用动画时，这些角度值就非常重要了。
CSS的旋转主要依赖于 transform 属性中的 rotate() 、rotate3d、 skew() 等方法。只需给它们传递旋转的角度即可。
除了旋转会使用角度之外，线性渐变也会经常使用角度值：
background: linear-gradient(45deg, #000, #fff);
deg 全称为 Degress，表示度，一个圆总共360度。
transform: rotate(2deg);
grad 全称为 Gradians，表示梯度，一个圆总共400梯度。
transform: rotate(2grad);
rad 全称为 Radians，表示弧度，一个圆总共2π弧度。
transform: rotate(2rad);
turn 全称为 Turns，表示圈（转），一个圆总共一圈（转）。
transform:rotate(.5turn);
百分比（%）也是我们比较常用的单位之一，所有接受长度值的属性都可以使用百分比单位。但是不同属性使用该单位的效果可能并不一样。但是都需要有一个参照值，也就是说百分比值是一个相对的值。
下面来看看常见场景中的百分比单位的使用。
在CSS中的盒模型包含的属性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。这些属性在使用百分比时，参照物不尽相同：
在CSS中文本控制的属性有font-size、line-height 、vertical-align、 text-indent等。这些属性在使用百分比时，参照物不尽相同：
在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作为单位。其参照物就是包含块的同方向的width和height。不同定位的包含块不尽相同：
CSS 中的 transform 属性中的 translate 和 transform-origin 值也可以设置百分比。
注意，在 translate 还有一个 z 轴的函数 translateZ() 。它是不接受百分比为单位的值。
又到了一年一度的“金三银四的季节了”。不过恐怕大家都有感觉，当下，正面临着近几年来的最严重的互联网寒冬，因此今天的“金三银四”肯定又是一场更为惨烈的江湖厮杀。
为了提升在厮杀中的“生存率”，让我们从面经开始如果吧。这将是一个长篇系列。这篇文章让我们先从CSS开始。
1. 盒模型
页面渲染时，dom 元素所采用的 布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为：
2. BFC
块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
IE下为 Layout，可通过 zoom:1 触发
3.层叠上下文
元素提升为一个比较特殊的图层，在三维空间中 (z轴) 高出普通元素一等。
4. 居中布局
5. 选择器优先级
6.去除浮动影响，防止父级高度塌陷
7.link 与 @import 的区别
8. CSS预处理器(Sass/Less/Postcss)
CSS预处理器的原理: 是将类 CSS 语言通过 Webpack 编译 转成浏览器可读的真正 CSS。在这层编译之上，便可以赋予 CSS 更多更强大的功能，常用功能:
面试中一般不会重点考察该点，一般介绍下自己在实战项目中的经验即可~
9.CSS动画
通常，CSS 并不是重点的考察领域，但这其实是由于现在国内业界对 CSS 的专注不够导致的，真正精通并专注于 CSS 的团队和人才并不多。因此如果能在 CSS 领域有自己的见解和经验，反而会为相当的加分和脱颖而出。
*请认真填写需求信息，我们会在24小时内与您取得联系。
