Anwendungen der Zeichen-API, Linien, Kreise usw.
Ich war in letzter Zeit sehr beschäftigt und habe selbst einen HTML5-Schaltplan erstellt
<!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>[ Verwandte Empfehlungen]
1. Besondere Empfehlung: Version V0.1 von „php Programmer Toolbox“ herunterladen
2. Kostenloses h5-Online-Video-Tutorial
3. php.cn Original-HTML5-Video-Tutorial
Das obige ist der detaillierte Inhalt vonZeichnen Sie einen einfachen und schönen Schaltplan in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Der Unterschied zwischen HTML und HTML5
Spot-Trading-Software
Welche Börse ist EDX?
So verwenden Sie die Countif-Funktion
Konfiguration der Java-Umgebungsvariablen
Was soll ich tun, wenn mein Computer hochfährt und auf dem Bildschirm ein schwarzer Bildschirm ohne Signal angezeigt wird?
Was ist ein Web-Frontend?
