Web 版 PowerDesigner (Canvas) 技术
什么是 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) 技术的更多相关文章
- Web 版 powerdesigner (Canvas) 技术分享
演示地址:http://www.netuml.com:8088 <canvas></canvas>是HTML5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事 ...
- Node学习笔记(三):基于socket.io web版你画我猜(一)
经过惨淡的面试,也是知道了自己的不足,刚好最近在学习node,心中便有了做一个web版的你画我猜的想法 首先说下思路,在做准备工作的时候,有两个大概的思路: 1.规定一块div,捕捉鼠标事件,动态生成 ...
- RDIFramework.NET V2.5(.NET快速信息化系统开发框架) Web版界面样例(可参考)
RDIFramework.NET V2.5(.NET快速信息化系统开发框架) Web版介绍 现已升级到V2.8,点击查看 B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起 ...
- WEB版一次选择多个文件进行批量上传(Plupload)的解决方案
WEB版一次选择多个文件进行批量上传(Plupload)的解决方案 转载自http://www.cnblogs.com/chillsrc/archive/2013/01/30/2883648.htm ...
- RDIFramework.NET(.NET快速信息化系统开发框架) Web版介绍
RDIFramework.NET(.NET快速信息化系统开发框架) Web版介绍 B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起后的一种网络结构模式,WEB浏览器是客户 ...
- java词频统计——web版支持
需求概要: 1.把程序迁移到web平台,通过用户上传TXT的方式接收文件. 2.用户直接输入要统计的文本,服务器返回结果 3.在页面上给出链接 (如果有封皮.作者.字数.页数等信息更佳)或表格,展示经 ...
- canvas技术整理
canvas技术整理 html <canvas id= "canvas"></canvas> javascript var canvas = documen ...
- Windows server 2008系统各类版本的优缺点比较,Windows2008系统标准版 企业版 数据中心版 WEB版等
大家都知道Windows Server 2008 发行了多种版本,以支持各种规模的企业对服务器不断变化的需求.Windows Server 2008 有 5 种不同版本,另外还有三个不支持 Windo ...
- web安全防御之RASP技术
作者: 我是小三 博客: http://www.cnblogs.com/2014asm/ 由于时间和水平有限,本文会存在诸多不足,希望得到您的及时反馈与指正,多谢! 0x00:we ...
随机推荐
- javaWEB与EL表达式
EL表达式1. EL是JSP内置的表达式语言! * jsp2.0开始,不让再使用java脚本,而是使用el表达式和动态标签来替代java脚本! * EL替代的是<%= ... %>,也 ...
- Weblogic+apache多虚拟主机
p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; f ...
- POJ1185炮兵阵地【动态规划】
炮兵阵地 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 26892 Accepted: 10396 Descriptio ...
- 2017.3.12 H5学习的第一周
本周我开始了H5的学习,在这一周里我们从html的基本标签开始一直讲到了才算css的用法,接下来我将记录下来本周我学到的H5的内容. 首先是声明文档,声明文档类型是HTML5文件,它在HTML文档必不 ...
- 高性能MySQL--索引学习笔记(原创)
看过一些人写的学习笔记,完全按书一字不漏照抄,内容很多,真不能叫笔记.遂自己整理了一份,取其精要. 更多笔记请访问@个人简书 [toc] 索引概述 索引即key 在存储引擎层实现,不同引擎工作方式不同 ...
- 深入Web请求过程
B/S网络架构 带来的好处: 1.客户端使用同一的浏览器. --浏览器的交互特性使其使用起来非常简便 2.服务器基于统一的http. --简化.规范开发模式,大大节省开发成本.如tomcat ngi ...
- Real-time 节点
Real-time 节点 Real-time 节点提供一个实时索引.通过这些节点索引的数据提供查询.real-time节点将定期将他们收集的数据转移到同一跨域时间的Historical节点. 使用zo ...
- AngularJS学习笔记3
6.AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. ng-controller 指 ...
- 日志框架SLF4J
1.什么是SLF4J SLF4J:Simple Logging Facade for Java,为java提供的简单日志Facade.Facade门面,更底层一点说就是接口.它允许用户以自己的喜好,在 ...
- [Android]Gradle 插件 DiscardFilePlugin(class注入&清空类和方法)
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/6732128.html Android Gradle 插件 Di ...