什么是 Canvas? 

     HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

  画布是一个矩形区域,您可以控制其每一像素。

  canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

  以下是利用canvas写的web版PowerDesigner效果图:

  在线演示:http://www.netuml.com:8088

创建 Canvas 元素

  向 HTML5 页面添加 canvas 元素。

  规定元素的 id、宽度和高度:

<canvas id="myCanvas" width="200" height="100"></canvas>

通过 JavaScript 来绘制

  canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

 JavaScript 使用 id 来寻找 canvas 元素:

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

  然后,创建 context 对象:

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

  getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

  下面的两行代码绘制一个红色的矩形:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

  fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。

理解坐标

  上面的 fillRect 方法拥有参数 (0,0,150,75)。

  意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。

  如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

更多 Canvas 实例

  下面的在 canvas 元素上进行绘画的更多实例:

实例 - 线条

  通过指定从何处开始,在何处结束,来绘制一条线:

JavaScript 代码:

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke(); </script>

  

canvas 元素:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

  

实例 - 圆形

通过规定尺寸、颜色和位置,来绘制一个圆:

JavaScript 代码:

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill(); </script>

  canvas 元素:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

  

Web 版 PowerDesigner (Canvas) 技术的更多相关文章

  1. Web 版 powerdesigner (Canvas) 技术分享

    演示地址:http://www.netuml.com:8088  <canvas></canvas>是HTML5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事 ...

  2. Node学习笔记(三):基于socket.io web版你画我猜(一)

    经过惨淡的面试,也是知道了自己的不足,刚好最近在学习node,心中便有了做一个web版的你画我猜的想法 首先说下思路,在做准备工作的时候,有两个大概的思路: 1.规定一块div,捕捉鼠标事件,动态生成 ...

  3. RDIFramework.NET V2.5(.NET快速信息化系统开发框架) Web版界面样例(可参考)

    RDIFramework.NET V2.5(.NET快速信息化系统开发框架)  Web版介绍 现已升级到V2.8,点击查看 B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起 ...

  4. WEB版一次选择多个文件进行批量上传(Plupload)的解决方案

    WEB版一次选择多个文件进行批量上传(Plupload)的解决方案  转载自http://www.cnblogs.com/chillsrc/archive/2013/01/30/2883648.htm ...

  5. RDIFramework.NET(.NET快速信息化系统开发框架) Web版介绍

    RDIFramework.NET(.NET快速信息化系统开发框架)  Web版介绍 B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起后的一种网络结构模式,WEB浏览器是客户 ...

  6. java词频统计——web版支持

    需求概要: 1.把程序迁移到web平台,通过用户上传TXT的方式接收文件. 2.用户直接输入要统计的文本,服务器返回结果 3.在页面上给出链接 (如果有封皮.作者.字数.页数等信息更佳)或表格,展示经 ...

  7. canvas技术整理

    canvas技术整理 html <canvas id= "canvas"></canvas> javascript var canvas = documen ...

  8. Windows server 2008系统各类版本的优缺点比较,Windows2008系统标准版 企业版 数据中心版 WEB版等

    大家都知道Windows Server 2008 发行了多种版本,以支持各种规模的企业对服务器不断变化的需求.Windows Server 2008 有 5 种不同版本,另外还有三个不支持 Windo ...

  9. web安全防御之RASP技术

    作者:      我是小三 博客:      http://www.cnblogs.com/2014asm/ 由于时间和水平有限,本文会存在诸多不足,希望得到您的及时反馈与指正,多谢! 0x00:we ...

随机推荐

  1. javaWEB与EL表达式

    EL表达式1. EL是JSP内置的表达式语言!  * jsp2.0开始,不让再使用java脚本,而是使用el表达式和动态标签来替代java脚本!  * EL替代的是<%= ... %>,也 ...

  2. Weblogic+apache多虚拟主机

    p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; f ...

  3. POJ1185炮兵阵地【动态规划】

    炮兵阵地 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 26892   Accepted: 10396 Descriptio ...

  4. 2017.3.12 H5学习的第一周

    本周我开始了H5的学习,在这一周里我们从html的基本标签开始一直讲到了才算css的用法,接下来我将记录下来本周我学到的H5的内容. 首先是声明文档,声明文档类型是HTML5文件,它在HTML文档必不 ...

  5. 高性能MySQL--索引学习笔记(原创)

    看过一些人写的学习笔记,完全按书一字不漏照抄,内容很多,真不能叫笔记.遂自己整理了一份,取其精要. 更多笔记请访问@个人简书 [toc] 索引概述 索引即key 在存储引擎层实现,不同引擎工作方式不同 ...

  6. 深入Web请求过程

    B/S网络架构 带来的好处: 1.客户端使用同一的浏览器. --浏览器的交互特性使其使用起来非常简便 2.服务器基于统一的http.  --简化.规范开发模式,大大节省开发成本.如tomcat ngi ...

  7. Real-time 节点

    Real-time 节点 Real-time 节点提供一个实时索引.通过这些节点索引的数据提供查询.real-time节点将定期将他们收集的数据转移到同一跨域时间的Historical节点. 使用zo ...

  8. AngularJS学习笔记3

    6.AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. ng-controller 指 ...

  9. 日志框架SLF4J

    1.什么是SLF4J SLF4J:Simple Logging Facade for Java,为java提供的简单日志Facade.Facade门面,更底层一点说就是接口.它允许用户以自己的喜好,在 ...

  10. [Android]Gradle 插件 DiscardFilePlugin(class注入&清空类和方法)

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/6732128.html Android Gradle 插件 Di ...