<!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. 【腾讯Bugly干货分享】深入源码探索 ReactNative 通信机制

    Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 本文从源码角度剖析 RNA 中 J ...

  2. 关于RPC与MQ异同的理解

    最近看了一些资料,回顾过去项目的经验,梳理自己对两者异同的理解: 相同: 1.都利于大型系统的解耦: 2.都提供子系统之间的交互,特别是异构子系统(如java\node等不同开发语言): 不同: 1. ...

  3. 假期实践作业：从IT角度看地铁

    实习时间:2016/02/23——2016/02/26 实习地点:京港地铁14号线 实习报告: 大学四年过得真快,转眼就大三了,大学前两年半的生活可谓多姿多彩,从不懂计算机到对编程感兴趣,期待得最多的 ...

  4. karma作为jQuery单元测试Runner

    karma作为angular测试runner出现,如果你使用过karma一定感受到这很不错的javascript测试runner.简单干净的配置文件karma.config.js,以及karma in ...

  5. SQLServer性能优化之 nolock，大幅提升数据库查询性能

    公司数据库随着时间的增长,数据越来越多,查询速度也越来越慢.进数据库看了一下,几十万调的数据,查询起来确实很费时间. 要提升SQL的查询效能,一般来说大家会以建立索引(index)为第一考虑.其实除了 ...

  6. jquery插件：仿百度首页可展开收起的消息提示控件

    消息提示插件大伙并不陌生了,无论是个系统还是网站,基本都要有消息系统.但我认为,一个好的提示插件应当具备很好的独立性,不与页面其他元素发生任何关系,其次是能对外提供丰富的接口,因为你生来就是被别人来调 ...

  7. openseadragon.js与deep zoom java实现艺术品图片展示

    openseadragon.js 是一款用来做图像缩放的插件,它可以用来做图片展示,做展示的插件很多,也很优秀,但大多数都解决不了图片尺寸过大的问题. 艺术品图像展示就是最简单的例子,展示此类图片一般 ...

  8. 翻译：AKKA笔记 - 介绍Actors

    任何以前做过多线程的人都不会否认管理多线程程序是困难并且痛苦的. 我说管理是因为它开始很容易而且当你看到性能提升时会很兴奋.但是,当你看到你没法从子线程的错误中恢复 或者 这些僵尸bug很难重现 或者 ...

  9. 微信分享调用 -- c#篇

    微信分享调用JS -- c#篇   1.前端 1.1 导入微信端的JS 如果你的网址是http,则地址为  http://res.wx.qq.com/open/js/jweixin-1.0.0.js ...

  10. 奇怪的BUG

    熟语说“常在河边走,哪能不湿鞋”,在现实中我想说:“代码写多了,总会遇到奇怪的bug”,遇到bug不可怕,可怕的是不自己不知道这么解决,有些bug能当时解决,有些在自己知识水平提高后知道如何解决.还有 ...