简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

HTML5画电路图

阿神
发布： 2016-11-08 14:30:05
原创
3187 人浏览过

画图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>
登录后复制


相关标签：
HTML5画电路图
来源：php.cn
上一篇：HTML5 Canvas实现的一个画板 下一篇：实现发送短信验证码后60秒倒计时
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
如果没有整个文件根目录，我无法使图像正常工作 希望能帮到你。我之前为网站编写过很多页面（仅为我自己练习而模拟），但由于某种原因，使用我的新（旧但运行Windows10）笔记本电脑，如果不使用整个文件路径，图像将无法加载。例如C...
来自于 2024-04-03 23:27:05
0
1
396
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！