HTML5 - 渲染简单的电路

Question

我有一套相对简单的电路。只涉及电阻器，电容器，电感器和修剪器/触发器的小型器件（即：三端可变电阻器）。

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

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

谢谢。

Answer 1

对不起，这是一段时间，但我已经完成了我答应你的图书馆。使用它，我可以创造这样的电路：

我创建了一个简单的绘图系统，在JavaScript为你建设一个短library.Copy使用，它的代码粘贴到您的网页，然后离开它。如果你想改变它，或者问我（或者其他知道Javascript的人），或者在像W3Schools或Mozilla MDN这样的网站上学习它。该代码需要一个id为“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/。请给它一个镜头，如果你有问题，请评论一下。

谢谢，希望这有助于！