canvas画简单电路图

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <canvas id="can1" width="500" height="400" style="margin: 20px auto"></canvas>

 </body>

 <script>

         var canvas = document.getElementById("can1");

         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>

 </html>

效果图：

主要运用几个函数：

moveTo(x,y)：将“画笔”放到某一个位置(x,y)准备画

lineTo(x1,y1)：从moveTo()定义的(x,y)开始一直画到lineTo()定义的(x1,y1)地方

stroke():画线

beginPath()：路径开始

closePath()：关闭路径

canvas画简单电路图的更多相关文章

用canvas画简单的“我的世界”人物头像
前言:花了4天半终于看完了<Head First HTML5>,这本书的学习给我最大的感受就是,自己知识的浅薄,还有非常多非常棒的技术在等着我呢.[熊本表情]扶朕起来,朕还能学! H5新增 ...
【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图
标题很难引人入胜,先放个效果图好了如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/can_demo/demo/draw_rol ...
【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】
标题很难引人入胜,先放个效果图好了如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/demo_set/html_demo/can ...
Canvas画椭圆的方法
虽然标题是画椭圆,但是我们先来说说Canvas中的圆相信大家对于Canvas画圆都不陌生 oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...
深夜，用canvas画一个时钟
深夜,用canvas画一个时钟查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
10分钟，利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...
Canvas 画圆
原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...
学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

随机推荐

一个App完成入门篇（四）- 完成反馈页面
上一节中我们学会了如何通过点击不同按钮切换页面,这节专注于完成反馈页面的功能以及细节动画. 导入项目添加新组件同步新组件完成页面布局输入时加动画效果弹出日期选择直接引用UI页面将要学习的 ...
64位进程池HashCode兼容处理
背景 net旧项目使用32位生成的HashCode,存储到数据库中.迁移到64位上,就需要对HashCode做兼容处理. 解决方案 1:进程池配置支持32位程序. 2:对Hashcode做兼容处理,[ ...
session机制详解以及session的相关应用
session是web开发里一个重要的概念,在大多数web应用里session都是被当做现成的东西,拿来就直接用,但是一些复杂的web应用里能拿来用的session已经满足不了实际的需求,当碰到这样的 ...
PyQt5应用与实践
一个典型的GUI应用程序可以抽象为:主界面(菜单栏.工具栏.状态栏.内容区域),二级界面(模态.非模态),信息提示(Tooltip),程序图标等组成.本篇根据作者使用PyQt5编写的一个工具,介绍如何 ...
linux环境 c 中如何执行shell命令
1 system 相当简单: int system(const char *command); system("ps -aux"); 2 popen popen有两个参数,第一个是 ...
Linux应用总结（1）：自动删除n天前日志
linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...
[Java面试七]Mybatis总结以及在面试中的一些问题.
1.JDBC编程有哪些不足之处,MyBatis是如何解决这些问题的? ① 数据库链接创建.释放频繁造成系统资源浪费从而影响系统性能,如果使用数据库链接池可解决此问题. 解决:在SqlMapConfig ...
Atitit.java图片图像处理attilax总结 BufferedImage extends java.awt.Image获取图像像素点image.getRGB(i, lineIndex); 图片剪辑/AtiPlatf_cms/src/com/attilax/img/imgx.javacutImage图片处理titit 判断判断一张图片是否包含另一张小图片 atitit 图片去噪算法的原理与
Atitit.java图片图像处理attilax总结 BufferedImage extends java.awt.Image 获取图像像素点 image.getRGB(i, lineIndex); ...
SqlServer与MySql的一些常用用法的差别
最近学习了一下mySql,总结一下SqlServer不同一些用法: 操作符优先级以下列表显示了操作符优先级的由低到高的顺序.排列在同一行的操作符具有相同的优先级.:=||, OR, XOR&& ...
神马是 NaN，它的类型是神马？怎么测试一个值是否等于 NaN?
NaN 是 Not a Number 的缩写,JavaScript 的一种特殊数值,其类型是 Number,可以通过 isNaN(param) 来判断一个值是否是 NaN: console.log(i ...

canvas画简单电路图

canvas画简单电路图的更多相关文章

随机推荐

热门专题