我试图找到一种从节点电压方程矩阵中渲染这些电路的简单方法.我不需要计算电流/电压值(我已经能够做到这一点).
我对如何在HTML5中渲染2D形状有基本的了解.在这一点上,我只需要一种简单的方法来通过线条放置和连接形状.我总是可以做一个简单的放置,但是关于如何避免重新发明轮子的任何建议都会很棒.
谢谢.
解决方法
我已经在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);
x+=dx*5;
y+=dy*5;
ctx.moveto(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,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(长度)
绘制一条在电路末端指定长度的导线.占用空间长度.
turnClockwise(长度)
转动下一个命令顺时针旋转90°的方向.没有空间.
turnCounterClockwise(长度)
转动下一个命令逆时针旋转90°的方向.没有空间.
drawCapacitor(长度)
在电路末端画一个电容.占50px.
drawInductor(长度)
在电路末端绘制一个电感.占50px.
drawResistor(长度)
在电路末端画一个电阻.占50px.
drawTrimmer(长度)
在电路末端画一个电阻.占50px.
完成绘图电路后,使用函数endCircuit()关闭然后绘制电路.它会自动从您停止的点到电路的开始画一条线.
我知道这很多事情要做,但是一旦理解了它,这真的是一种非常简单灵活的方法.如果你想看到这个,请到这里：http://jsfiddle.net/mindoftea/ZajVE/.请试一试,如果你有问题,请评论一下.
谢谢,希望这有帮助！
原文地址：https://www.jb51.cc/html5/168208.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
