<!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画简单电路图的更多相关文章

  1. 用canvas画简单的“我的世界”人物头像

    前言:花了4天半终于看完了<Head First HTML5>,这本书的学习给我最大的感受就是,自己知识的浅薄,还有非常多非常棒的技术在等着我呢.[熊本表情]扶朕起来,朕还能学! H5新增 ...

  2. 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图

    标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/can_demo/demo/draw_rol ...

  3. 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】

    标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/demo_set/html_demo/can ...

  4. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  5. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  6. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  7. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  8. Canvas 画圆

    原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...

  9. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

随机推荐

  1. 冲刺阶段 day12

    项目进展 周二我们将专业管理部分又继续做了完善,之前漏掉的几项功能也都在熟能生巧中编写的越来越顺畅,但还差最后一点数据库部分没能实现,我们会尽快完成. 存在问题 还是与数据库的连接上出现问题,部分不能 ...

  2. 5天玩转C#并行和多线程编程 —— 第三天 认识和使用Task

    5天玩转C#并行和多线程编程系列文章目录 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 5天玩转C#并行和多线程编程 —— 第二天 并行集合和PLinq 5天玩转C#并行和多线程编 ...

  3. 走进AngularJs(九)表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  4. 透析Express.js

    前言 最近,本屌在试用Node.js,在寻找靠谱web框架时发现了Express.js.Express.js在Node.js社区中是比较出名web框架,而它的定位是“minimal and flexi ...

  5. Java基础之常用类

    1.Collections类: (1)此类完全由在 collection 上进行操作或返回 collection 的静态方法组成. (2)静态方法摘要: static <T> boolea ...

  6. PMP和PRINCE2

    首先先简单介绍一下,PMP是属于美国的项目管理知识体系.PRINCE2是属于英国项目体系. 美国的项目管理知识体系最主要的价值是把世界上所有跟项目管理相关的,不管是知识.最佳实践.工具技术,把它们汇总 ...

  7. 将不确定变为确定~transactionscope何时提升为分布式事务？(sql2005数据库解决提升到ＭＳＤＴＣ的办法)

    回到目录 对于transactionscope不了解的同学,可以看我的相关文章 第二十六回   将不确定变为确定~transactionscope何时提升为分布式事务? 第二十七回   将不确定变为确 ...

  8. Android开发小问题总结

    Android开发遇到的小问题之小解: ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...

  9. Atitit 迭代法  “二分法”和“牛顿迭代法 attilax总结

    Atitit 迭代法  "二分法"和"牛顿迭代法 attilax总结 1.1. ."二分法"和"牛顿迭代法"属于近似迭代法1 1. ...

  10. paip.java gui swt/jface 最佳实践

    paip.java gui swt/jface 最佳实践 1. 工具:Eclipse +jigloo4 1 2. 安装插件: 1 1. IMPORT swt lib 2 2. 新建立窗体 2 3. 运 ...