html5 电流效果,HTML5 – 渲染简单的电路

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

我已经在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/.请试一试,如果你有问题,请评论一下.

谢谢,希望这有帮助！