<!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. Syncfusion 复选框 ComboBoxAdv

    XAML: <syncfusion:GridTemplateColumn.EditTemplate> <DataTemplate DataType="viewModel:C ...

  2. 渐析java的浅拷贝和深拷贝

          首先来看看浅拷贝和深拷贝的定义:       浅拷贝:使用一个已知实例对新创建实例的成员变量逐个赋值,这个方式被称为浅拷贝.       深拷贝:当一个类的拷贝构造方法,不仅要复制对象的所 ...

  3. 用C#Winform写个简单的批量清空文件内容和删除文件的小工具

    用C#Winform写个简单的批量清空文件内容和删除文件的小工具 本文介绍这个简单得不能再简单的小项目.做这个项目,有以下目的. 1 当然是做个能用的工具 2 学习使用Github 关于用VS2013 ...

  4. 国外社交网站获取分享数量APIs

    之前有一篇文章详细介绍了如何获取网页在Facebook,Twitter和LinkedIn社交平台上分享的数量,点击这里查看.这里再扩充一下! Twitter GET URL: http://cdn.a ...

  5. Redmined的历史记录显示 "Updated by {{author}} {{age}} ago"

    最近Redmine出了点问题,简单查了一下,是ruby的本地冲突包i18n导致的, 先到redmine中跑命令: gem list --local,  查出本地ruby安装的所有的包 这里可以看到i1 ...

  6. 404 Not Found !

    MyEclipse中tomcat服务器运行好好的, 却总是报错, 代码没啥问题啊!! 之前都是运行好好的, 难道是我广告不小心改了哪里引起的?于是对比,回退代码,但是结果还是一样的!! 一个简简单单的 ...

  7. iOS 向模拟器里添加照片

    iOS 向模拟器里添加照片 模拟器里Photos最开始时是没有照片的,有时我们做Demo时需要Photos里面的照片做测试,这时就需要把Mac上的照片导入到模拟器里.步骤如下: 1,打开模拟器 2,选 ...

  8. [SpringMVC]SpringMVC学习笔记一: springmvc原理及实例解析.

    前言:今天来回顾下SpringMVC的开发原理, 使用图文并茂的方式 来解析其中的内幕, 我相信懂了其中的运行机制后, 对于面试中SpringMVC大家都可以说so easy了. 一, 图示法 第二张 ...

  9. Atitit main函数的ast分析  数组参数调用的ast astview解析

    Atitit main函数的ast分析  数组参数调用的ast astview解析 1.1. Xxcls.main(new String[]{"","bb"}) ...

  10. salesforce 零基础学习（四十一）Group

    salesforce中,有的时候我们需要将一组用户放进一个Group,用来实现以下主要功能: 1.通过sharing rule设置默认的共享访问; 2.将记录分享给其他用户; 3.指定同步的联系人,这 ...