整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文作者：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其實沒有那么恐怖，中招了前三天特難受，熬過來了就沒事了，大家莫慌?，F在小編就可以認認真真的繼續創作內容了。同時也非常感謝大家默默的關心我小編身體狀況，非常謝謝。
創作不易，喜歡的老鐵們加個關注，點個贊，后面會持續更新干貨，速速收藏，謝謝！
說起 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小時內與您取得聯系。
