<!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. Redis服务器的启动过程分析

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/127.html?1455808771 本文将通过分析代码来介绍Redis的 ...

  2. Duplicate id @+id/imageView, already defined earlier in this layout,android

    原文地址http://www.thinksaas.cn/topics/0/448/448554.html 其實這個訊息也是可以解掉的,當然最簡單的解法就是你不要使用相同的id就好了.不過萬一你是幫別人 ...

  3. [Java面试六]SpringMVC总结以及在面试中的一些问题.

    1.简单的谈一下SpringMVC的工作流程? 流程 1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理 ...

  4. fir.im Weekly - 当技术成为一种 “武器”

    最近纷纷扰扰,快播公开庭审,携程事件仍在升级,百度还在继续无底线.我们相信技术本身并不可耻,但是用技术作恶就是可耻.当技术成为一种武器,Do not be evil. 好了,继续本期的 fir.im ...

  5. css 弹出层-透明层

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. SQL SERVER 查询性能优化——分析事务与锁（五）

    SQL SERVER 查询性能优化——分析事务与锁(一) SQL SERVER 查询性能优化——分析事务与锁(二) SQL SERVER 查询性能优化——分析事务与锁(三) 上接SQL SERVER ...

  7. javascript_core_09之继承、属性、对象

    1.OOP之修改继承: ①child._proto_=father:=>Object.setPrototypeOf(child,father):每次只能修改一个对象的父对象: ②构造函数.pro ...

  8. 自引用指针this

    C++为成员函数提供了一个名字为this的指针,这个指针称为自引用指针,每当创建一个对象时,系统就把this指针初始化为指向该对象,即this指针的值是当前调用成员函数的对象的起始地址.每当调用一个成 ...

  9. 【WP开发】正确理解页面缓存

    注:本文内容面向Runtime App. 在新建项目后,细心观察,你会发现在App类中有以下代码: // TODO: 将此值更改为适合您的应用程序的缓存大小 rootFrame.CacheSize = ...

  10. sublime简要笔记

    选中单词 [1]选中当前单词 ctrl+d [2]跳过当前单词 ctrl+k ctrl+d [3]选中相同的所有单词 alt+f3 [4]多行游标 按住shift,然后按住鼠标右键向下拖动 行操作 [ ...