Question

我有一套相对简单的电路。小型仅涉及电阻器，电容器，电感器和微调器/微调器（即：三端可变电阻器）。

我试图找到一种从节点电压方程矩阵中渲染这些电路的简单方法。我不需要计算电流/电压值（我已经能够做到这一点）。

我对如何在HTML5中渲染2D形状有基本的了解。在这一点上，我只需要一种简单的方法来通过线条放置和连接形状。我总是可以做一个简单的放置，但是关于如何避免重新发明轮子的任何建议都会很棒。

谢谢。

Answer 1

很抱歉这已经有一段时间了，但我已经完成了我答应你的图书馆了。使用它，我可以创建这样的电路：

circuits

我已经在javascript中创建了一个简化的绘图系统，您可以通过构建一个简短的库来使用它。将代码复制并粘贴到您的页面中，然后保留它。如果你想改变它，要么问我（或其他知道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/。请试一试，如果您有问题，请评论一下。

谢谢，希望这会有所帮助！

Answer 2

好用！我也需要教学目的，包括电路（和力学）。如果有人喜欢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); `

HTML5 - 渲染简单的电路

2 个答案: