<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8"/>

  <script type="application/javascript">

    function draw() {

      var canvas = document.getElementById('canvas');

      if (canvas.getContext) {

        var ctx = canvas.getContext('2d');

        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';

        ctx.fillRect(120, 120,200, 200);

        ctx.beginPath();

        ctx.fillStyle='#000'

        ctx.moveTo(220, 20);

        ctx.lineTo(90, 140);

        ctx.lineTo(350, 140);

        ctx.fill();

      }

    }

  </script>

  <style type="text/css">

     canvas { border: 1px solid black; }

   </style>

 </head>

 <body onload="draw();">

   <canvas id="canvas" width="500" height="500"></canvas>

 </body>

</html>

　　效果图：

用canvas画一个房子的更多相关文章

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

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

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

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

  3. 用Canvas画一个刮刮乐

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

  4. 使用H5 canvas画一个坦克

      具体步骤如下:   1. 首先做出绘图区,作为坦克的战场   <canvas id="floor" width="800px" height=&quo ...

  5. 用canvas画一个的小画板（PC端移动端都能用）

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

  6. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. 手对手的教你用canvas画一个简单的海报

    啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信.qq等平台.图片中包含用户的姓名.头像.和带着自己信息的二维码.然后,如何生成这张海报呢~~~首先我们老大告诉我有一个插件叫htm ...

  8. 玩转html5（四）----使用canvas画一个时钟（可以动的哦！）

    先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...

  9. canvas画一个时钟

    效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. Delphi中的消息 （转载）

    消息是Windows发出的一个通知,它告诉应用程序某个事件发生了.在Delphi中,大多数情况下Windows的消息被封装在VCL的事件中,我们只需处理相应的VCL事件就可以了,但如果我们需要编写自己 ...

  2. Mysql关于时间排序的问题

    SELECT * FROM table_name WHERE deleted = 0 order by create_time DESC 当用户使用DESC(降序时),最终得到的结果集,时间早的在前面 ...

  3. vue项目初始化时npm run dev报错webpack-dev-server解决方法

    vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...

  4. Java笔记 #05# Java Native Interface

    参考资料:http://www.ntu.edu.sg/home/ehchua/programming/java/javanativeinterface.html(很详细) 看jdk源代码时,经常会看到 ...

  5. nmon监控数据分析

    性能测试中,各个服务器资源占用统计分析是一个很重要的组成部分,通常我们使用nmon这个工具来进行监控以及监控结果输出. 一. 在监控阶段使用类似下面的命令 ./nmon -f write_3s_20v ...

  6. JS设计模式（4）迭代器模式

    什么是迭代器模式? 定义:提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示. 主要解决:不同的方式来遍历整个整合对象. 何时使用:遍历一个聚合对象. 如何解决:把在元素之间游 ...

  7. NSIS控制面板中显示安装包的大小和禁止多个安装程序实例

    转载:http://www.yhxs3344.net/jscript/nsis 转载:http://www.yhxs3344.net/archives/1292 1.控制面板中显示安装包的大小 ;需要 ...

  8. bzoj千题计划168：bzoj3513: [MUTC2013]idiots

    http://www.lydsy.com/JudgeOnline/problem.php?id=3513 组成三角形的条件:a+b>c 其中,a<c,b<c 若已知 两条线段之和=i ...

  9. redis-server 使用

    redis.conf ################################## NETWORK ##################################### bind 127 ...

  10. Django 修改视图文件（views.py）并加载Django模块 + 利用render_to_response()简化加载模块 +locals（）

    修改视图代码,让它使用 Django 模板加载功能而不是对模板路径硬编码.返回 current_datetime 视图,进行如下修改: from django.template.loader impo ...