畫圖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中文網其他相關文章!