截图如下：

代码如下：

 <!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. AMS1117稳压模块

    AMS1117有降压稳压的作用.我们使用的是AMS1117-5,输出5V电压. 理论参数: 输出条件 最小值 理论值 最大值 理论电路图: 引脚图:

  2. JavaScript 时间格式

    方法1: Date.prototype.Format = function (fmt) { var o = { , //月份 "d+": this.getDate(), //日 = ...

  3. win10中mount和unmount iso文件

    https://www.windowscentral.com/how-mount-or-unmount-iso-images-windows-10 You can also right-click t ...

  4. OI无关--关于侧边栏

    自己在比较闲的时候学了一点html和js,大概能写一些比较简单的东西了,于是就动起了侧边栏的念头. 如果能在博客里加一个题目快速跳转也很兹磁啊. 首先要选择题目,oj的名字肯定是不能直接输入,因为还有 ...

  5. Visual Studio 项目模板制作(二)

    上一篇,我们制作了项目模板,本篇我制作项模板 首先,从我们需要导出模板的项目中,文件->导出模板,弹出 导出模板向导 对话框 选择项模板,点击下一步 选择要导出的项,点击下一步 选择要Refer ...

  6. Uncaught TypeError: $(...).daterangepicker is not a function

    本文为博主原创,未经允许不得转载: 在用bootstrap做一个日期插件的时候,代码和js,css等都是拷贝网上下载下来的实例,但是在 调试的时候,浏览器控制台一直报错 Uncaught TypeEr ...

  7. IL and 堆于栈

    CIL的基本构成+CIL操作码速记表+CIL操作码大全速查 引用类型:引用类型存储在堆中.类型实例化的时候,会在堆中开辟一部分空间存储类的实例.类对象的引用还是存储在栈中. 值类型:值类型总是分配在它 ...

  8. BZOJ 2339 【HNOI2011】 卡农

    题目链接:卡农 听说这道题是经典题? 首先明确一下题意(我在这里纠结了好久):有\(n\)个数,要求你选出\(m\)个不同的子集,使得每个数都出现了偶数次.无先后顺序. 这道题就是一道数学题.显然我们 ...

  9. Linux基础※※※※Linux中的图形相关工具

    kolourPaint类似于Win中个mspaint: Ubuntu安装:sudo apt-get install kolourpaint4 图1 kolourPaint界面 其他类似的画图工具见链接 ...

  10. OSError: [WinError 193] %1 不是有效的 Win32 应用程序。

    经过搜索查找,发现错误原因是我在win7 x64的机器上装了64位的python IDLE,不能有效load32位的dll,换成32位的python就好了.