抱歉，久违了，但我已经完成了我答应你的图书馆。使用它，我可以创建如下电路：
我通过构建一个简短的库，在 javascript 中创建了一个简化的绘图系统供您使用。将它的代码复制并粘贴到您的页面中，然后保留它。如果您想更改它，可以问我（或其他了解 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)
在电路的末端画一个电容器。占用 50 像素。
drawInductor(length)
在电路末端画一个电感。占用 50 像素。
drawResistor(length)
在电路的末端画一个电阻。占用 50 像素。
drawTrimmer(length)
在电路的末端画一个电阻。占用 50 像素。
绘制完电路后，使用函数endCircuit() 关闭然后绘制电路。它会自动从您停止的点到电路的起点画一条线。
我知道要做的事情很多，但是一旦您理解了它，这确实是一种非常简单灵活的方法。如果你想看到这个在行动，去这里：http://jsfiddle.net/mindoftea/ZajVE/。请试一试，如果有问题，请发表评论。
谢谢，希望对您有所帮助！