HTML5画一个简单呢好看的电路图

来源：动视网责编：小采时间：2020-11-27 15:09:04

HTML5画一个简单呢好看的电路图

HTML5画一个简单呢好看的电路图:画图API的应用，线，圆等最近特别忙，承蒙大伙关照，自己折腾着做了个HTML5画电路图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>何

推荐度：

点击下载本文 文档为doc格式

导读HTML5画一个简单呢好看的电路图:画图API的应用，线，圆等最近特别忙，承蒙大伙关照，自己折腾着做了个HTML5画电路图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>何

画图API的应用，线，圆等

最近特别忙，承蒙大伙关照，自己折腾着做了个HTML5画电路图

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <title>何问起</title>
<meta name="description" content="canvas画简单电路图 by hovertree.com" />
</head>
<body>
 <canvas id="canHewenqi" width="500" height="300" style="margin: 20px auto"></canvas>
 
 <script>
 var canvas = document.getElementById("canHewenqi");
 var cxt = canvas.getContext("2d");
cxt.moveTo(10,10);
 cxt.lineTo(100,10);
 cxt.stroke();
 cxt.beginPath();
 cxt.moveTo(100,10);
 cxt.lineTo(100,0);
 cxt.lineTo(150,0);
 cxt.lineTo(150,20);
 cxt.lineTo(100,20);
 cxt.closePath();
 cxt.moveTo(150,10);
 cxt.lineTo(250,10);
 cxt.lineTo(250,100);
 cxt.stroke();
 cxt.moveTo(225,100);
 cxt.lineTo(275,100);
 cxt.stroke();
 cxt.moveTo(225,115);
 cxt.lineTo(275,115);
 cxt.stroke();
 cxt.moveTo(250,115);
 cxt.lineTo(250,160);
 cxt.stroke();
 cxt.moveTo(250,160);
 cxt.lineTo(150,160);
 cxt.stroke();
 cxt.arc(130,160,20,0,360,false);
 cxt.stroke();
 cxt.moveTo(150,160);
 cxt.lineTo(10,160);
 cxt.lineTo(10,10);
 cxt.stroke();
 
 
 </script>
<div>canvas画简单电路图 by 何问起</div>
<!--http://hovertree.com/code/html5/fatorqgm.htm-->
</body>
</html>

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费h5在线视频教程

3. php.cn原创html5视频教程