异常教程

circuit js（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言：探索 Circuit JS 的无限可能

在编程与电子工程的交汇处，Circuit JS 为开发者提供了一种直观且高效的方式，通过 JavaScript 搭建虚拟电路系统。无论是模拟基础的电阻-电容电路，还是设计复杂的数字逻辑门，它都以轻量化的架构和高度的可扩展性，成为电子爱好者和开发者的重要工具。本文将从零开始，逐步解析其核心功能、应用场景及实战案例，帮助读者构建从理论到实践的知识体系。

电路模拟基础：从物理到代码的桥梁

什么是 Circuit JS？

Circuit JS 是一个基于 JavaScript 的开源库，专注于在浏览器端实现电子电路的实时模拟。它允许开发者通过代码定义电路元件（如电阻、电容、晶体管等），并动态观察电流、电压等参数的变化。其核心优势在于：

  1. 无需物理硬件：直接在网页上搭建并调试电路；
  2. 实时可视化：通过动画效果展示电流流动和信号波形；
  3. 跨平台兼容性：支持主流浏览器，无需额外插件。

形象比喻：可以将 Circuit JS 视为“电子电路的乐高积木”，开发者像拼装玩具一样，通过代码组合元件，并观察它们如何协同工作。

电路模拟的核心要素

电路模拟依赖三个关键概念：

  1. 元件模型：如电阻（Resistor）、电压源（Voltage Source）、晶体管（Transistor）等；
  2. 连接方式：串联（Series）与并联（Parallel）的逻辑关系；
  3. 物理定律：欧姆定律（V=IR）、基尔霍夫定律（KCL/KVL）的数学表达。

例如，在模拟一个简单电路时，开发者需定义元件参数（如电阻值 100Ω），并通过代码指定它们的连接方式，最终通过 Circuit JS 的引擎计算电流和电压。

快速入门：构建第一个电路

环境准备与基础代码结构

要使用 Circuit JS，需先引入其核心库文件。假设我们通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/circuit-js/dist/circuit.min.js"></script>

接下来，创建一个 HTML 容器用于渲染电路：

<div id="circuit-container" style="width: 600px; height: 400px;"></div>

编写第一个电路：LED 灯闪烁

步骤 1：初始化电路模拟器

const circuit = new Circuit();  
const gui = new GUI(circuit, document.getElementById('circuit-container'));

步骤 2：添加元件

// 添加 5V 电压源  
const voltageSource = circuit.createVoltageSource("V1", 5);  

// 添加电阻  
const resistor = circuit.createResistor("R1", 220);  

// 添加 LED（视为 2V 的电压源）  
const led = circuit.createVoltageSource("LED", 2);

步骤 3：连接元件

// 连接电压源正极到电阻  
voltageSource.pos.connect(resistor.pos);  

// 电阻另一端连接到 LED 负极  
resistor.neg.connect(led.neg);  

// LED 正极连接到电压源负极（接地）  
led.pos.connect(voltageSource.neg);

步骤 4：启动模拟

gui.start();

运行后，开发者将看到 LED 灯亮起，并可通过调整电阻值观察亮度变化。

核心功能详解：从简单到复杂

元件库与自定义组件

Circuit JS 提供了丰富的内置元件，如：

  • 被动元件：电阻、电容、电感；
  • 主动元件：晶体管、运算放大器（Op-Amp）；
  • 信号源：正弦波发生器、脉冲发生器。

自定义组件是 Circuit JS 的进阶功能。例如，可封装一个“非门”逻辑电路：

class NOTGate extends Component {  
  constructor(name) {  
    super(name);  
    this.input = this.createTerminal("input");  
    this.output = this.createTerminal("output");  

    // 使用晶体管实现逻辑非  
    const transistor = new Transistor("T1");  
    const resistor = new Resistor("R1", 1000);  

    this.input.connect(transistor.base);  
    resistor.pos.connect(transistor.collector);  
    resistor.neg.connect(this.output);  
    transistor.emitter.connect(transistor.neg);  
  }  
}

实时数据可视化

通过 circuit.addProbe 方法，可监听任意节点的电压或电流变化，并绘制波形图：

const voltageProbe = circuit.addProbe("V1_pos", voltageSource.pos);  
const plot = new WaveformPlot(document.getElementById('waveform'), voltageProbe);

实战案例：模拟 RC 振荡电路

案例背景

RC 振荡电路利用电阻和电容的充放电特性，产生周期性信号。通过 Circuit JS，我们可以动态调整元件参数，观察波形变化。

代码实现

// 创建 555 定时器的简化 RC 电路  
const resistor1 = circuit.createResistor("R1", 1000);  
const resistor2 = circuit.createResistor("R2", 2000);  
const capacitor = circuit.createCapacitor("C1", 1e-6);  

// 连接电路  
resistor1.pos.connect(resistor2.pos);  
resistor2.neg.connect(capacitor.pos);  
capacitor.neg.connect(resistor1.neg);  

// 添加电压源  
const power = circuit.createVoltageSource("V1", 9);  
power.pos.connect(resistor1.pos);  
power.neg.connect(capacitor.neg);  

// 添加探针  
const probe = circuit.addProbe("Capacitor Voltage", capacitor.pos);

运行后，电容两端的电压将呈现指数充放电曲线，开发者可通过调整电阻或电容值，观察周期变化。

进阶技巧：性能优化与扩展

优化模拟性能

对于复杂电路，可采取以下策略：

  1. 减少时间步长：通过 circuit.setTimeStep(0.001) 调整计算精度；
  2. 使用 Web Workers：将模拟逻辑移至后台线程，避免阻塞主线程；
  3. 简化非关键元件：例如，将高精度元件替换为近似模型。

与外部系统集成

Circuit JS 可通过 API 与其他工具交互：

  • 与 Node.js 结合：在服务器端生成电路配置文件；
  • 与 Three.js 结合：通过 WebGL 实现 3D 电路可视化；
  • 与机器学习框架结合：利用模拟数据训练电路优化模型。

结论：Circuit JS 的未来与价值

Circuit JS 不仅是开发者验证电路设计的工具，更是一个探索电子工程与编程结合的试验场。它降低了电子实验的门槛，让理论知识通过代码具象化，尤其适合教育场景与原型开发。随着 Web 技术的演进，其在实时协作、增强现实（AR）电路教学等领域的潜力将进一步释放。

无论是初学者通过代码理解欧姆定律，还是工程师快速验证电路逻辑，Circuit JS 都提供了“所见即所得”的开发体验。掌握这一工具，或许将成为开发者在电子与编程交叉领域的重要竞争力。

最新发布

查看更多文章