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

今天药忘吃喽~ 2022-10-06 13:52 178阅读 0赞

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

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

谢谢,希望这有帮助！

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

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

相关 html5 电流效果,参赛作品《可测量uA级输出电流的可调电压源》

相关 html5视频控制效果

相关 html5烟花绽放效果

相关 html5元素拖拽效果

相关 HTML5拖拽效果

相关 HTML5 WebSocket 简单实例

相关 html5 商品分类页面效果

相关 html5卡片效果

相关 HTML&HTML5