本文摘自PHP中文网,作者零下一度,侵删。
画图API的应用,线,圆等最近特别忙,承蒙大伙关照,自己折腾着做了个HTML5画电路图
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!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 >
</ body >
</ html >
|
【相关推荐】
1. 特别推荐:“php程序员工具箱”V0.1版本下载
2. 免费h5在线视频教程
3. php.cn原创html5视频教程
以上就是HTML5画一个简单呢好看的电路图的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5新增了哪些input类型及其属性?
关于老版本的浏览器不兼容h5和c3的处理方法
HTML5本地数据库实例详解
HTML5-offline apis的简单介绍
详细介绍websocket api HTML5规范翻译
使用HTML5 canvas封装一个echarts实现不了的饼图
h5之scrollintoview用法详解
HTML5与html的区别有哪些?HTML5与html四大区别总结
关于老式浏览器兼容HTML5和css3的问题详解
详解HTML5拖放功能实例
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5画一个简单呢好看的电路图