截图如下：

代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <title>Drawing house</title>

 </head>

 <body>

 <canvas id="myCanvas" width="650" height="550"  style="border:1px solid"></canvas>

 <script>

 var c = document.getElementById("myCanvas");

 var ctx = c.getContext("2d");

 ctx.fillStyle = "#9FFFFFFF";

 ctx.fillRect(25,275,600,250);

 // Draw triangle

 ctx.fillStyle="#FFFFDBFF";

 ctx.beginPath();

 ctx.moveTo(325,25);

 ctx.lineTo(25,275);

 ctx.lineTo(635,275);

 ctx.closePath();

 ctx.fill();

 //windows

 ctx.fillStyle="#FF7FEDFF";

 ctx.fillRect(50,400,200,100);

 ctx.fillStyle="#FFD800FF";

 ctx.fillRect(52,402,96,46);

 ctx.fillRect(152,402,96,46);

 ctx.fillRect(52,452,96,46);

 ctx.fillRect(152,452,96,46);

 //door

 ctx.fillStyle = "#754719";

 ctx.fillRect(300,375,100,150);

 //door knob

 ctx.beginPath();

 ctx.fillStyle = "#F2F2F2";

 ctx.arc(325,400,3,0,2*Math.PI);

 ctx.fill();

 ctx.closePath();

 //Text on the Right

 ctx.font="40px Veranda";

 ctx.fillText("Hello",425,350);

 ctx.font="30px Veranda";

 ctx.fillText("LiuWei",425,390);

 ctx.fillText("Canvas",425,420);

 </script>

 </body>

 </html>

Drawing house的更多相关文章

  1. .Net Core上用于代替System.Drawing的类库

    目前.Net Core上没有System.Drawing这个类库,想要在.Net Core上处理图片得另辟蹊径. 微软给出了将来取代System.Drawing的方案,偏向于使用一个单独的服务端进行各 ...

  2. 关于Cewu Lu等的《Combining Sketch and Tone for Pencil Drawing Production》一文铅笔画算法的理解和笔录。

     相关论文的链接:Combining Sketch and Tone for Pencil Drawing Production 第一次看<Combining Sketch and Tone f ...

  3. （转）System.Drawing.Color的颜色对照表

    经常使用System.Drawing.Color, 本篇介绍一下颜色与名称及RGB值的对应关系. 1. 颜色与名称的对照表(点击下图放大看): 2. 颜色与RGB值对照表: Color.AliceBl ...

  4. .Net Core 之 图形验证码 本文介绍.Net Core下用第三方ZKWeb.System.Drawing实现验证码功能。

    本文介绍.Net Core下用第三方ZKWeb.System.Drawing实现验证码功能. 通过测试的系统: Windows 8.1 64bit Ubuntu Server 16.04 LTS 64 ...

  5. System.Drawing.Color

    System.Drawing.Color color=Color.Red; System.Drawing.Color color=Color.FromArgb(,,); System.Drawing. ...

  6. drawing

    /* 程序名:drawing..c 功能:展示OpenCV的图像绘制功能 */ #include "cv.h" #include "highgui.h" #in ...

  7. 使用System.Drawing.Imaging.dll进行图片的合并

    在最近开发项目的时候有时候需要进行图片的合并,即将两张图片合并成功一张图片 合并图片的代码: #region 两张图片的合并 /// <summary > /// 将Image对象转化成二 ...

  8. [OpenCV] Samples 01: drawing

    基本的几何图形,标注功能. commondLineParser的使用参见:http://blog.csdn.net/u010305560/article/details/8941365 #includ ...

  9. [emacs] Drawing uml under emacs org-mode using plantUML - 类图

    [emacs] Drawing uml under emacs org-mode using plantUML - 类图 // */ // ]]>   [emacs] Drawing uml u ...

  10. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

随机推荐

  1. 浅入浅出JS中的eval及json

    声明: 首先声明一下,本人是JS新手,所以不敢说深入,只是把最近对eval的学习经验拿出来跟大家分享,如果您是高手可略去不看. 适合读者: 对JS中的eval一知半解,不知eval是如何把字符串转换为 ...

  2. HDU 3404 Switch lights（Nim积）题解

    题意:在一个二维平面中,有n个灯亮着并告诉你坐标,每回合需要找到一个矩形,这个矩形xy坐标最大的那个角落的点必须是亮着的灯,然后我们把四个角落的灯状态反转,不能操作为败 思路:二维Nim积,看不懂啊, ...

  3. spark监控入门

    前言 Spark作为计算引擎每天承载了大量的计算任务,为了监控集群的资源使用情况,对spark的监控也在所难免,Spark的监控有3个入口,1. Rest; 2.另一个是Metrics; 3. Log ...

  4. VS2010下创建WEBSERVICE，第二天 ----你会在C#的类库中添加web service引用吗?

    本文并不是什么高深的文章,只是VS2008应用中的一小部分,但小部分你不一定会,要不你试试: 本人对于分布式开发应用的并不多,这次正好有一个项目要应用web service,我的开发环境是vs2008 ...

  5. javaweb项目运行时生成的Servers项目作用

    在javaweb项目中,看到有一个Servers的项目,发现每新增一个项目,就会在Servers项目中新生成一些对应的项目文件. 如图所示: 每个项目都有对应的文件.文件的结构图如下: 解释一:Ser ...

  6. mybatis与hibernate常用的持久化类，及sqlsession和sqlsessionTemplate区别

    首先, 通过翻阅源码,我们来整理一下mybatis进行持久化操作时重要的几个类:SqlSessionFactoryBuilder:build方法创建SqlSessionFactory实例.SqlSes ...

  7. The way to Go(5): 文件名、关键字与标识符

    Reference: Github: Go Github: The way to Go 文件名 1.后缀名:.go 2.小写字母 3._分割名称 4.不包含空格或其他特殊字符 标识符 有效的标识符必须 ...

  8. Nginx 随笔

    使用包管理工具安装nginx Linux(基于deb) sudo apt-get install nginx Linux(基于rpm) sudo yum install nginx FreeBSD s ...

  9. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  10. windows批处理命令

    前言 批处理文件(batch file)包含一系列 DOS命令,通常用于自动执行重复性任务.用户只需双击批处理文件便可执行任务,而无需重复输入相同指令.编写批处理文件非常简单,但难点在于确保一切按顺序 ...