HTML5畫一個簡單呢好看的電路圖-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5畫一個簡單呢好看的電路圖

零下一度

May 17, 2017 pm 05:47 PM

畫圖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畫一個簡單呢好看的電路圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn