是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了解更多