HTML5渲染简单电路
我有一套相对简单的电路。只涉及电阻、电容器、电感和微调/微调的小电阻(即:三端可变电阻)。
我正在尝试从节点电压方程矩阵中找到一种简单的方法来呈现这些电路。我不需要计算电流/电压值(我已经能够这样做了)。
我对如何在HTML5中渲染2D图形有一个基本的了解。在这一点上，我只需要一个简单的方法来放置和连接形状通过线。我总是可以做一个简单的放置，但是任何关于如何避免重复发明轮子的建议都是很棒的。
谢谢。
回答 2
Stack Overflow用户
发布于 2012-07-01 12:33:26
抱歉，过了一段时间了，我已经完成了我向你承诺的库。使用它，我可以创建这样的电路：
我已经用javascript创建了一个简化的绘图系统，您可以通过构建一个简短的library.Copy并将其代码粘贴到您的页面中来使用它，然后让它保持原样。如果你想改变它，要么问我(或者其他懂Javascript的人)，要么在W3Schools或Mozilla MDN这样的网站上学习。代码需要一个id为" canvas“的canvas元素。代码：
"use strict"
var wW=window.innerWidth;
var wH=window.innerHeight;
var canvasHTML=document.getElementById("canvas");
canvasHTML.width=wW;
canvasHTML.height=wH;
var ctx=canvasHTML.getContext("2d");
var ix;
var iy;
var x;
var y;
var d;
var dx;
var dy;
function beginCircuit(a,b)
{
ctx.lineWidth=1.5;
ctx.strokeStyle="#000";
ctx.beginPath();
x=a;
y=b;
d=0;
dx=1;
dy=0;
ix=x;
iy=y;
ctx.moveTo(x,y);
drawWire(50);
drawPower();
}
function endCircuit()
{
ctx.lineTo(ix,iy);
ctx.stroke();
}
function drawWire(l)
{
x+=dx*l;
y+=dy*l;
ctx.lineTo(x,y);
}
function drawPower()
{
var n;
drawWire(10);
n=3;
ctx.moveTo(x+10*dy,y+10*dx);
ctx.lineTo(x-10*dy,y-10*dx);
x+=dx*5;
y+=dy*5;
while(n--)
{
ctx.moveTo(x+15*dy,y+15*dx);
ctx.lineTo(x-15*dy,y-15*dx);
x+=dx*5;
y+=dy*5;
ctx.moveTo(x+10*dy,y+10*dx);
ctx.lineTo(x-10*dy,y-10*dx);
if(n!=0)
{
x+=dx*5;
y+=dy*5;
}
}
ctx.moveTo(x,y);
drawWire(10);
}
function drawCapacitor()
{
drawWire(22.5);
ctx.moveTo(x+10*dy,y+10*dx);
ctx.lineTo(x-10*dy,y-10*dx);
x+=dx*5;
y+=dy*5;
ctx.moveTo(x+10*dy,y+10*dx);
ctx.lineTo(x-10*dy,y-10*dx);
ctx.moveTo(x,y);
drawWire(22.5);
}
function drawInductor()
{
var n,xs,ys;
drawWire(9);
n=4;
xs=1+Math.abs(dy);
ys=1+Math.abs(dx);
x+=dx*6;
y+=dy*6;
ctx.scale(xs,ys);
while(n--)
{
ctx.moveTo(x/xs+5*Math.abs(dx),y/ys+5*dy);
ctx.arc(x/xs,y/ys,5,Math.PI/2*dy,Math.PI+Math.PI/2*dy,1);
x+=6.5*dx;
y+=6.5*dy;
if(n!=0)
{
if(dx>=0)
{
ctx.moveTo(x/xs-5*dx,y/ys-5*dy);
}
ctx.moveTo(x/xs-5*dx,y/ys-5*dy);
ctx.arc(x/xs-6.5/2*dx,y/ys-6.5/2*dy,1.5,Math.PI+Math.PI/2*dy,Math.PI/2*dy,1);
}
}
ctx.moveTo(x/xs-1.75*dx,y/ys-1.75*dy);
ctx.scale(1/xs,1/ys);
ctx.lineTo(x,y);
drawWire(9);
}
function drawTrimmer()
{
ctx.moveTo(x+35*dx-7*dy,y+35*dy-7*dx);
ctx.lineTo(x+15*dx+7*dy,y+15*dy+7*dx);
ctx.moveTo(x+13*dx+4*dy,y+13*dy+4*dx);
ctx.lineTo(x+17*dx+10*dy,y+17*dy+10*dx);
ctx.moveTo(x,y);
drawCapacitor();
}
function drawResistor()
{
var n;
drawWire(10);
n=5;
x+=dx*5;
y+=dy*5;
while(n--)
{
ctx.lineTo(x-5*dy,y-5*dx);
ctx.lineTo(x+5*dy,y+5*dx);
x+=5*dx;
y+=5*dy;
}
ctx.lineTo(x,y);
drawWire(10);
}
function turnClockwise()
{
d++;
dx=Math.cos(1.570796*d);
dy=Math.sin(1.570796*d);
}
function turnCounterClockwise()
{
d--;
dx=Math.cos(1.570796*d);
dy=Math.sin(1.570796*d);
}然后创建一个新的<script type="text/javascript">....</script>标记，并将绘图代码放在标记之间。绘制代码的工作方式如下：
首先调用函数beginCircuit(x,y)。在括号内，将您想要开始电路的x和y坐标放入其中，如：beginCircuit(200,100)。这将在您指定的坐标(以像素为单位)处绘制一条导线和一块电池。电池和电线在屏幕上占据了100个像素的空间。
然后，您可以调用以下任何函数：
drawWire(length)
在回路的末端绘制指定长度的导线。占用length空间。
turnClockwise(length)
将下一个命令绘制的方向顺时针旋转90°。不占用任何空间。
turnCounterClockwise(length)
按逆时针方向旋转下一个命令绘制90°的方向。不占用任何空间。
drawCapacitor(length)
在电路的末尾绘制电容器。占用50px。
drawInductor(length)
在电路的末端绘制电感。占用50px。
drawResistor(length)
在电路的末尾绘制一个电阻。占用50px。
drawTrimmer(length)
在电路的末尾绘制一个电阻。占用50px。
绘制完电路后，使用函数endCircuit()关闭，然后绘制电路。它将自动从您停止的点到回路的起点绘制一条导线。
我知道这有很多事情要做，但一旦你理解了它，这真的是一种非常容易和灵活的方式。如果你想看到它的实际效果，请转到这里：http://jsfiddle.net/mindoftea/ZajVE/。请试一试，如果你有问题，请发表意见。
谢谢，希望这能对你有所帮助！
Stack Overflow用户
发布于 2019-10-22 21:49:01
不错的工作！我也需要教学目的，其中包括电路(和力学)。如果有人喜欢OO风格，就把它打包成一个类。还增加了一些灵活性，以自定义符号，如标签等http://jsfiddle.net/michael_chnc/q01f2htb/
` /*Basic Circuit symbol toolset, still alot missing credit to: https://stackoverflow.com/users/434421/mindoftea*/
class Circuit { constructor(name = "canvas", ix = 50, iy = 50) {
this.canvas = document.getElementById(name);
this.ctx = canvas.getContext("2d");
this.d = 0; ... }
var cc = new Circuit("canvas", 100, 100); cc.ctx.lineWidth = 2; cc.drawPower(60, 1, "E"); cc.drawCapacitor(60, "C=50 \u03bc"); cc.drawSwitch(40, 1, "S1"); cc.drawInductor(50, 4, "I=40"); cc.turnClockwise(); cc.drawTrimmer(60, "T"); cc.drawResistor(60, 3, 1, "R"); cc.turnClockwise(); cc.drawResistor(160, 3, 2, "R"); cc.save(); cc.turnCounterClockwise(); cc.drawWire(20); cc.turnClockwise(); cc.drawResistor(); cc.turnClockwise(); cc.drawWire(20); cc.restore(); cc.turnClockwise(); cc.drawWire(20); cc.turnCounterClockwise(); cc.drawResistor(50, 5, 2, "R2"); cc.turnCounterClockwise(); cc.drawWire(20); cc.turnClockwise(); cc.drawWire(80); cc.turnClockwise(); cc.drawWire(30); cc.drawSwitch(50, false, "S3");
cc.finish(true); `https://stackoverflow.com/questions/11217374
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号