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

互联网 17-5-17

画图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视频教程

以上就是HTML5画一个简单呢好看的电路图的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： HTML5，电路图