HTML5描画回路図

阿神
リリース: 2016-11-08 14:30:05
オリジナル
3245 人が閲覧しました

画图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>
ログイン後にコピー


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート