<!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. Django框架详细介绍---request对象

    几个重要的函数 1.HttpRequest.get_host() 根据从HTTP_X_FORWARDED_HOST(如果打开 USE_X_FORWARDED_HOST,默认为False和 HTTP_H ...

  2. codeforces 982C Cut 'em all!

    题意: 给出一棵树,问最多去掉多少条边之后,剩下的连通分量的size都是偶数. 思路: 如果本来就是奇数个点,那么无论去掉多少条边都不可能成立的. 如果是偶数个点,就进行一次dfs,假设一个点的父亲是 ...

  3. MTCNN试用

    检测工作想借用MTCNN里的48-net,源码来自CongWeilin Git 下下来就能跑,真是良心 进入pepare_data准备好数据以后进入48-net,目录下有一个pythonLayer.p ...

  4. 字典排序 sorted

    a = {6:2,8:0,1:4,-5:6,99:11,4:22} print( sorted(a.items()) ) #默认安照key排序的print( sorted(a.items(),key= ...

  5. Kubernetes持久化存储2——探究实验

    目录贴:Kubernetes学习系列 一.简介 本文在“创建PV,创建PVC挂载PV,创建POD挂载PVC”这个环境的基础上,进行各种删除实验,并记录.分析各资源的状态. 二.实验脚本 实验创建了一个 ...

  6. Hdu2039 三角形

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2039 三角形 Time Limit: 2000/1000 MS (Java/Others)    Me ...

  7. VMware中为Linux安装vm-tools

    1.虚拟机中选择安装VMware-tools,或者重新安装 2.在/mnt目录下建立cdrom文件夹 mkdir /mnt.cdrom 3.把/dev/cdrom光驱挂载到刚才建的文件夹上 mount ...

  8. Pandas 学习笔记

    Pandas 学习笔记 pandas 由两部份组成,分别是 Series 和 DataFrame. Series 可以理解为"一维数组.列表.字典" DataFrame 可以理解为 ...

  9. 虚拟主机、VPS、ECS云服务器 区别

    在阿里云上买了个云服务器. ssh命令都没通,找服务端同事帮我看,说我买错了.应该买ECS. 1.虚拟主机 虚拟主机就是利用虚拟化的技术,将一台服务器划分出一定大小的空间,每个空间都给予单独的 FTP ...

  10. Learning-Python【5】：Python数据类型（1）—— 整型、浮点型、字符串

    一.整型 1.用途:记录年龄.等级.各种号码等 2.定义方式 age = 22 只能将纯数字的字符串转换成整型 3.常用操作+内置方法 赋值运算.比较运算.算数运算 该类型总结: 存一个值 不可变(可 ...