是Web開發和CSS的新手嗎？你是否想過如何在互聯網上看到那些漂亮的形狀？別再奇怪了。你來對地方了。

下面，我將解釋使用CSS創建形狀的基本知識。還有很多要告訴你關于這個話題！因此，我不會涵蓋所有（絕大部分）工具和形狀，但這應該使你基本了解如何使用CSS創建形狀，并且創建文字環繞圖形的方式方法。

有些形狀比其他形狀需要更多的“技巧和竅門”。使用CSS創建形狀通常是使用寬度，高度，頂部，右側，左側，邊框，底部，變換和偽元素（例如：before和：after）的組合。我們還具有更現代的CSS屬性，可使用諸如shape-outside和clip-path之類的形狀來創建形狀，這些內容我將在后面寫出來。

<div class="tui-demo-7"></div>

<style type="text/css">
 .tui-demo-7 {
 width: 100px;
 height: 100px;
 margin: 50px auto;
 border: 1px solid #393D49;
 border-radius: 50%;
 position: relative;
 animation: tui-demo-7 2.0s linear infinite;
 }
 .tui-demo-7:after {
 content: "";
 width: 30px;
 height: 30px;
 border-radius: 50%;
 position: absolute;
 top: 0;
 left: 0;
 background: #5FB878;
 }
 @keyframes tui-demo-7 {
 0% {
 transform: rotate(0);
 }
 100% {
 transform: rotate(360deg);
 }
 }
</style>

文由ScriptEcho平臺提供技術支持

項目地址：傳送門

基于JSXGraph的圓外公切圓作圖

應用場景介紹

本代碼可用于在線繪制圓外公切圓，在幾何教學、圖形設計等領域有廣泛應用。

代碼基本功能介紹

該代碼使用JSXGraph庫，實現以下功能：

• 創建兩個圓和一個圓心連線
• 創建圓外公切圓
• 求出圓外公切圓與原圓的交點
• 繪制圓外公切圓的切線和半徑

功能實現步驟及關鍵代碼分析

1. 加載JSXGraph庫

const loadJavascript = (jsUrl) => { ... }
const loadStyle = (styleUrl) => { ... }

使用loadJavascript和loadStyle函數加載JSXGraph庫的JavaScript和CSS文件。

2. 創建JSXGraph畫板

var brd = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-6, 6, 6, -6] })

使用initBoard函數創建JSXGraph畫板，并設置其邊界框。

3. 創建圓、圓心連線和圓外公切圓

o1 = brd.create('point', [-2, 2], { name: 'O1' })
o2 = brd.create('point', [3, -3], { name: 'O2' })

p1 = brd.create('point', [-3, 5], { name: 'P1' })
p2 = brd.create('point', [2, -3], { name: 'P2' })
c1 = brd.create('circle', [o1, p1])
c2 = brd.create('circle', [o2, p2])

c3 = brd.create('circle', [m, o2], {
strokeColor: 'green',
strokeWidth: '1px',
})

創建兩個圓c1和c2，以及一個圓心連線lm。然后創建圓外公切圓c3，其圓心為m（兩個原圓圓心的中點），半徑為o2到m的距離。

4. 求圓外公切圓與原圓的交點

i1 = brd.create('intersection', [c3, c4, 0], { visible: true })
i2 = brd.create('intersection', [c3, c4, 1], { visible: true })

使用intersection函數求出圓外公切圓c4與原圓c1和c2的交點i1和i2。

5. 繪制圓外公切圓的切線和半徑

l1 = brd.create('line', [o1, i1], { visible: false })
l2 = brd.create('line', [o1, i2], { visible: false })

i3 = brd.create('intersection', [c1, l1, 0], { visible: true })
i4 = brd.create('intersection', [c1, l2, 0], { visible: true })
v1 = brd.create('arrow', [o1, i3], {
  strokeColor: 'lightblue',
  strokeWidth: '1px',
})
v2 = brd.create('arrow', [o1, i4], {
  strokeColor: 'lightblue',
  strokeWidth: '1px',
})
l3 = brd.create('line', [i1, o1], { visible: false })
l4 = brd.create('line', [o1, i2], { visible: false })
t1 = brd.create('tangent', [c1, i3], { strokeColor: 'darkblue' })
t2 = brd.create('tangent', [c1, i4], { strokeColor: 'darkblue' })

t3 = brd.create('line', [o2, i1], { strokeColor: 'pink' })
t4 = brd.create('line', [o2, i2], { strokeColor: 'pink' })

創建輔助線l1和l2，并求出它們與原圓c1的交點i3和i4。然后繪制圓外公切圓的切線t1和t2，以及連接圓心o2和交點i1和i2的線段t3和t4。

總結與展望

通過這段代碼，我們可以直觀地繪制圓外公切圓，并探索其性質。在開發過程中，我收獲了以下經驗：

• 掌握JSXGraph庫的使用，提高了圖形繪制能力。
• 加深了對圓外公切圓的理解，提升了幾何知識。

未來，可以考慮拓展該代碼的功能，例如：

• 添加拖拽功能，允許用戶交互式地移動圓和圓心連線。
• 探索圓外公切圓的其他性質，如圓心連線垂直平分線段P1P2。
• 更多組件：
• 
  

獲取更多Echos

本文由ScriptEcho平臺提供技術支持

項目地址：傳送門

微信搜索ScriptEcho了解更多