<!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. 在 CentOS7 上安装 Zookeeper服务

    1.创建 /usr/local/services/zookeeper 文件夹: mkdir -p /usr/local/services/zookeeper 2.进入到 /usr/local/serv ...

  2. 使用 Docker 搭建 Java Web 运行环境(转)

    原文 http://www.importnew.com/21798.html Docker 是 2014 年最为火爆的技术之一,几乎所有的程序员都听说过它.Docker 是一种“轻量级”容器技术,它几 ...

  3. sql语句中 “where 1=1” 的用处

    通过拼凑sql语句,加入若干个where限制条件,如:select * from table "where conditionA" + ”and conditionB“ + ”an ...

  4. Cycle (KMP + hash)

    题意:给你2个串,让你判断2个字符串的前缀是否满足首尾连接形成的环是不是一样的. 思路:我们需要提前知道的是满足条件的前缀一定满足 strA = str1 + str2, strB = str2 + ...

  5. codeforces 985A Chess Placing

    题意: 移动最少的步数,使得所有的棋子在同一颜色的格子中. 每次一个棋子只能向左或者向右移动一步,不能移到有棋子的格子中. 思路: 枚举全黑和全白的情况. 对于每一个需要移动的棋子,它移动到的位置一定 ...

  6. SLF4J bindings

    see: https://www.slf4j.org/manual.html

  7. springmvc sessionfilter 登录过滤器

    1.在web.xml中配置 <!-- sessionfilter --> <filter> <filter-name>sessionFilter</filte ...

  8. Shift键的三个妙用!Word又现神操作!

    1.Shift+Alt+上下方向键 :调整段落顺序 同时按这三个键,能够调整段落的顺序,也可以用来调整表格中的行序. 2.Shift+F3:英文大写/小写/首字母大写,这三种模式切换 PS:如果中间夹 ...

  9. kruscal重构树略解

    我们先看一道题:Luogu P4197 Peaks 这道题珂以用启发式合并+主席树来做 那么强制在线呢?(bzoj 3551 [ONTAK2010]Peaks加强版) 离线做法就不行了 我们就要用一个 ...

  10. spring mvc 的上传图片是怎么实现的?

    spring mvc 的上传图片是怎么实现的? 导入jar包,commons-io.jar 及 commons-fileupload.jar 在springmvc的配置文件中配置Mutipart解析器 ...