画图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在线视频教程
立即学习“前端免费学习笔记（深入）”；
以上就是HTML5画一个简单呢好看的电路图的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
446
收藏
