Canvas画电路图

<!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.strokeStyle = color;
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>

转载于:https://my.oschina.net/u/2400119/blog/779805

Canvas画电路图相关推荐

html5制作线路图,HTML5使用canvas画简单电路图
何问起 var canvas = document.getElementById("canHewenqi"); var cxt = canvas.getContext(" ...
html5制作线路图,HTML5画电路图
画图API的应用,线,圆等 http://t.cn/RGfhSlO 1.[代码][JavaScript]代码何问起 var canvas = document.getElementById(&quo ...
html原理图,HTML5画电路图
下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. 画图API的应用,线,圆等 http://t.cn/RGfhSlO 何问起 var can ...
微信小程序中base64格式的小程序码通过canvas画出来无效
使用场景小程序中的文章详情页面有一个分享功能:用户点击分享按钮,生成一张分享图片(包括封面图,简介以及带有文章ID的小程序码),方便用户保存在本地. 问题说明小程序码通过后台接口获取,格式如下:' ...
关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网
小程序使用Canvas画饼图 2018-10-24 0 先上效果图 -------------------------------------------------------------w --- ...
python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
[html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...

Canvas画电路图

Canvas画电路图相关推荐

最新文章

热门文章