<!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. Cloud-init

    cloud-init用于在创建虚拟机时通过元数据服务对虚拟机基本配置,包括常见的主机名,用户,密码等等.同时用户可以通过user_data自定义一些数据对虚拟机进行配置,可以有配置文件cloud-co ...

  2. poj1733（并查集+离散化）

    题目大意:有一个长度为n的0,1字符串, 给m条信息,每条信息表示第x到第y个字符中间1的个数为偶数个或奇数个, 若这些信息中第k+1是第一次与前面的话矛盾, 输出k; 思路:x, y之间1的个数为偶 ...

  3. 关于lazyload的实现原理

    核心原理是: 1 设置一个定时器,计算每张图片是否会随着滚动条的滚动,而出现在视口(也就是浏览器中的 展现网站的空白部分 )中: 2 为<img>标签设置一个暂存图片URL的自定义属性(例 ...

  4. url的参数解析成key-value

    function urlController(url) { var _url = url.split("?")[1]; if(!_url){ return {}; } var wi ...

  5. tiny6410采用sd卡烧写的问题

    今天想用32G的SD卡来烧写tiny6410的uboot但是失败了,换了一张4G的卡就可以了, 还有sd卡启动的uboot使用tftp命令是有问题的

  6. Electron把网页打包成桌面应用并进行源码加密

    前言 最近想把自己用html+css+js做的网页界面打包成桌面应用,网上一搜,发现Electron是一个不错的选择,试了试,发现效果真的不错.这里记录一下打包过程以作记录,便于自己以后查看学习. 一 ...

  7. mac忘记操作密码

    转载于:https://blog.csdn.net/wu110112/article/details/70312987 如果忘记mac登陆密码应该如何处理呢? 这里大家请勿着急,我来帮大家解决这个问题 ...

  8. 剑指offer（10）矩形覆盖

    题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 题目分析 当然也可以逆向思维 应为可以横着放或竖着放,多以f ...

  9. 基本设置_common_setting

    comment(备注) ID(请勿修改) Param(参数) 说明与格式 积分物品ID设置 1 60000 积分属性虚拟货币,存储在Auth库account表TokenAmount字段. 这里设置积分 ...

  10. python中使用configparser库，实现配置文件的读取

    背景: 在写接口自动化框架,配置数据库连接时,测试环境和UAT环境的连接信息不一致,这时可以将连接信息写到conf或者cfg配置文件中 python环境请自行准备. python代码直接封装成类,方便 ...