HTML5画电路图
- 阿神原创
- 2016-11-08 14:30:053246浏览
画图API的应用，线，圆等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
</body>
</html>声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn