<!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. Hadoop -- 概念

    hadoop 一个开源的,稳定的,可扩展的,分布式的计算框架 实现单一的服务器到成千上万机器之间共同处理数据的一个可扩展性框架 Hadoop 项目主要包含以下四个模块 Hadoop Common:为其 ...

  2. 《CSS世界》读书笔记（十）

    <!-- <CSS世界>张鑫旭著 --> 温和的padding属性 因为默认的box-sizing是content-box,所以使用padding会增加元素的尺寸. 尺寸表现对 ...

  3. 20190404用户及用户组管理(week1_day4)

    useradd userdel usermod groupadd groupdel 用户管理 为什么需要有用户? 1. linux是一个多用户系统 2. 权限管理(权限最小化) 用户:存在的目录是为了 ...

  4. openvpn 初步使用

    服务端:Centos 7.2 openvpn 2.4.3 客户端:Windows 10 安装包 openvpn的官网在国内访问不了,服务端通过yum安装,客户端在第三方网站下载的 一般的国内源应该都包 ...

  5. 从路由器镜像中提取uImage头信息

    uImage header为64字节,文件头为27 05 19 56 hexdump -C a.bin | grep "27 05 19 56" 或者 hd aa.bin | gr ...

  6. 节约内存：Instagram的Redis实践（转）

    Instagram可以说是网拍App的始祖级应用,也是当前最火热的拍照App之一,Instagram的照片数量已经达到3亿,而在Instagram里,我们需要知道每一张照片的作者是谁,下面就是Inst ...

  7. 剑指offer（34）第一个只出现一次的字符

    题目描述 在一个字符串(1<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置 题目分析 只需要用map记录字符出现的次数就行,比较简单的题 代码 f ...

  8. SELinux/SEAndroid 实例简述（二） TE语言规则【转】

    本文转载自:https://blog.csdn.net/shell812/article/details/54930246 版权声明:本文为博主原创文章,未经博主允许不得转载.    https:// ...

  9. 深度学习标注工具 LabelMe 的使用教程（Windows 版本）

    深度学习标注工具 LabelMe 的使用教程(Windows 版本) 2018-11-21 20:12:53 精灵标注助手:http://www.jinglingbiaozhu.com/ LabelM ...

  10. IdentityServer4 错误解决方案

    错误 解决方案 Grant types list cannot contain both xx and xx 以下授权类型不能同时存在: Implicit AuthorizationCode Impl ...