[注]&本文不是类图的基础教程, 只是类图的图形总结.&
学习UML图形
推荐阅读&UML参考手册&第2版.&&
推荐微软的开发软件设计模型&&
类图展示了面向对象系统的构造模块。描绘模型(或部分模型)的静态视图，显示它包含的属性和行为，而不是详细描述操作的功能或完善方法。
类图最常用来表达多个类和接口之间的关系。
可使用的工具集(EA工具箱)有:
一 类图元素&
Package,&图形表示为一个文件夹,&包的版型(StereoType)有:
1)&普通包,&表示为一个文件夹, 如图Package1和Package4 &
2)&其它包, 表示为一个文件夹+书名号包含的具体版型或特殊符号, 如图Package2和Package3&
Class,&图形表示为一个实心矩形或圆形(椭圆)[+一系列附加符号],&类的版型(StereoType)有:&
1)&普通类,&表示为一个实心矩形, 如图Class1&
2) 边界类, 表示为一个实心圆形+实竖线, 如图Class2&
3)&实体类, 表示为一个实心圆形+实横线, 如图Class3&
4)&控制类, 表示为一个实心圆形+在圆周上的箭头, 如图Class4&
5)&其它类, 表示为一个实心矩形或圆形(椭圆)+书名号包含的具体版型或特殊符号, 如图Class 5, 6, 7 ... &
[注1] 类图标变化最大, 版型最多, 必须根据所属的视图或图形进行识别, 如Class2在包图和类图中称为边界类, 在活动图中同样的图标应称为边界对象.&
[注2] 类图标的矩形表示和Artifact相似, 都是实心矩形, 区别方法是Artifact图标会含有Icon, 而类图标一般几何元素拼凑.&
[注3] 类图标的椭圆表示和用例相似, 都是实心椭圆, 但用例不会出现在类图上, 类也不应该出现在用例图上, 因此不会冲突.&
[注4] 包图上的类一般引用类图, 类图内部的画法, 参见类图部分. (下同)&
Interface,&图形表示为一个实心矩形+书名号包含的interface字样,&接口没有版型(StereoType).&
接口是特殊的类, 因此图标和类相同, 书名号包含的interface是其区别与类的唯一方式.&
注意: 接口如果没有明确的详细操作，也可以画成一个圆环。当画成圆环的时候，到这个环形标柱的实现连接没有目标箭头。
4.&数据类型
DataType, 图形表示为一个实心矩形+书名号包含的datatype(或其它)字样,&数据类型的版型(StereoType)有:
1)&数据类型, 表示为一个实心矩形+书名号包含的interface字样, 如图DataType1&
2) 基本类型, 表示为一个实心矩形+书名号包含的interface字样, 如图PrimitiveType1
3)&枚举类型, 表示为一个实心矩形+书名号包含的interface字样, 如图Enumeration1&&
4) 表格类型, 表示为一个实心矩形+书名号包含的interface字样, 如图Table1&
5)&信号类型, 表示为一个实心矩形+书名号包含的interface字样, 如图Signal1&
6) 其它类型,&表示为一个实心矩形+书名号包含的其它字样, 如图DataType 2, 3, 4 ...&
[注4] 数据类型用来描述形如枚举, 结构, 表格等特殊的数据类型或类, 同样的, 使用不同的版型是为了定义更准确.&
5.1 包与包之间的关系&
1) 合并 merge,&表示为一条虚线+单向空心箭头+书名号包含的merge字样, 箭头指向被合并的包, 如图Controller合并GenApply &
包合并定义了一个包的内容是如何被另一个包扩展的关系(包合并定义了源包元素与目标包同名元素之间的泛化关系).&
2) 导入(引入) import/access,&表示为一条虚线+单向空心箭头+书名号包含的import/access字样, 箭头指向被合并的包, 如图Controller导入Interger
包导入是一种允许采用非限定性名称访问来自于另一个命名空间中的元素的关系.&
3) 嵌套 nesting, 表示为一条实线+带十字线的实心圆, 圆远离被合并的包, 如图Controller嵌套ConnSeq(即ConnSeq被嵌套)&
源包和目标包间的嵌套连接符说明目标包完全包含源包.&
5.2 类与类(接口/数据类型)之间的关系
本图中使用的例子来自&&
1) 实现&realization, 表示为一条虚线+单向空心箭头, 箭头指向被实现的接口&
2) 泛化&generalization,&表示为一条实线+单向空心箭头, 箭头指向被泛化的基(父)类&
3) 依赖&dependency, 表示为一条虚线[+单向或双向开口箭头], 单向箭头表示单向依赖&
4) ①&关联&association,&表示为一条实线[+单向或双向开口箭头], 单向箭头表示单向关联&
4) ②&聚合 aggregation&,&表示为一条实线[+单向空心菱形], 空心菱形箭头指向目标类或父类&
4) ③&组合 composition,&表示为一条实线[+单向实心菱形], 实心菱形箭头指向目标类或父类&
[注5] 应避免双向依赖.&
[注6]&几种关系所表现出的强弱程度从弱到强依次是: 依赖 & 关联 & 聚合 & 组合 ( 即耦合度:&组合 & 聚合 & 关联 & 依赖 ).&
6.1 包的可见性&
Package Visibility,&使用版型(StereoType)表示, &&import&&表示public, &&access&&表示private&
[注] import VS&access:&
Ordering在import导入Products和Pricing后可直接使用Products和Pricing包内的元素;
Ordering在access导入Storage后仍可直接使用Storage包内的元素;&
而当Ordering被其它包引用时, 其它包只能直接使用Products和Pricing包内的元素, 不能直接使用Storage包内的元素; 但仍可采用Storage::Goods这样的限定性名访问Storage包中的元素.&
6.2&类(接口/数据类型)的可见性&
Class&Visibility, 使用&+/-/#/~&符号表示&
1) 公共 public, 用 + 号表示, 如图Storage包内Goods类的GetCount成员&
2) 私有 private, 用 - 号表示, 如图Storage包内Goods类的Count属性&
3) 保护 protected, 用 # 号表示, 如图Storage包内Goods类的SetCount成员&
4) 包 package, 用 ~ 号表示, 代表包内可见, 如图Storage包内Goods类的Test成员&
二 类图关系&
1. 实现&realization&
是源对象执行或实现目标，实现被用来表达模型的可跟踪性和完整性－业务模型或需求被一个或多个用例实现，用例则被类实现，类被组件实现，等等。这种实现贯穿于系统设计的映射需求和类等，直至抽象建模水平级。从而确保整个系统的一张宏图，它也反映系统的所有微小组成，以及约束和定义它的细节。实现关系用带虚线的实箭头表示。
2. 泛化&generalization&
泛化被用来说明继承关系。连接从特定类元到一般类元。泛化的含义是源类继承了目标类的特性。
下图的图显示了一个父类泛化一个子类， 类&Circle&的一个实例将会有属性 & x_position&，& y_position& ， &radius& 和 方法 &display()&。
注意：类 "Shape" 是抽象的，类名显示为斜体。
3. 依赖&dependency&
依赖被用来描述模型元素间广泛的依赖关系。
通常在设计过程早期显示两个元素之间存在某种关系，因为是初期而不能确定具体是什么关系，在设计过程末期，该继承关系会被归入已有构造型 (构造型 可以是实例化 &instantiate&，跟踪 &trace&，导入 &import&， 和其它的关系)，或被替换成一个更明确类型的连接符。
3.1&跟踪&trace&
跟踪关系是一种特殊化的依赖关系。连接模型元素或跨模型但是具有相同概念的模型元素集。
跟踪被经常用来追踪需求和模型的变化。由于变化是双向的，这种依赖关系的顺序通常被忽略。
这种关系的属性可以被指定为单向映射，但跟踪是双向的，非正式的和很少可计算的。
4.&关联&association&
4.1 关联 Association&
关联描述了系统中对象或实例之间的离散连接.&
关联表明两个模型元素之间有关系，通常用在一个类中被实现为一个实例变量。
连接符可以包含两端的命名的角色，基数性，方向和约束。
关联是元素之间普通的关系。如果多于两个元素，也可以使用菱形的关联关系。
当从类图生成代码时，关联末端的对象将变成目标类中实例变量。见下图示例 "playsFor" 将变成"Player"类中的实例变量。
4.2 聚合&Aggregations 与&组合&Aggregations&
聚合表示部分与整体关系的关联.&
组合表示更强形式的关联, 整体有管理部分的完整职责, 比如为它们分配和释放空间.&
三 静态视图&
1) 静态视图是UML的基础. 模型中的元素是应用中有意义的概念, 包括真实世界的概念, 抽象的概念, 实现方面的概念...系统中各种概念.&
2) 静态视图捕捉对象的结构. 面向对象的系统把数据结构和行为特征统一到一个对象结构中. 静态视图包括所有传统数据结构的内容, 同时也包括了数据相关操作的构成.&
3) 静态视图将行为的声明, 比如操作, 描述成离散的模型元素, 但是不包括它们动态行为的细节. 静态视图将这些声明作为可命名实体对待, 这些实体的动态行为在其他视图中描述. 动态视图要求静态视图描述动态交互的事物 -- 如果希望说清楚交互是怎样进行的, 就必须先说清楚是什么在交互. 静态视图是建立其他视图的基础.&
4) 静态视图中关键元素是类元及它们之间的关系. 类元是描述事物的建模元素. 类元有若干种, 包括类, 接口和数据类型. 行为实体, 比如用例和信号, 同样被具体化为类元. 例如组件, 协作和节点这样的类元能够体现实现方面的意图.&
5) 为了利于理解和模型的可重用性, 大的模型必须由较小的单元组成. 包是拥有和管理模型内容的一般目的组织单元. 每个元素都被包所拥有. 模型是一个包的集合, 这些包描述了系统的完整视图, 并且能够或多或少地被独立使用. 模型则指定一个直接包含所有包的根包.&
3) 数据类型&
4) 含义分层&
阅读(...) 评论()12762人阅读
三层架构（12）
C#和设计模式（19）
上一篇博文介绍了，现在这篇博客将会介绍EA画图工具的使用。
一、Enterprise Architect简介
1.EA(EnterpriseArchitect)是一个对于软件系统开发有着极好支持的CASE软件（Computer Aided Software Engineering）。EA不同于普通的UML画图工具（如VISIO），它将支撑系统开发的全过程。在需求分析阶段，系统分析与设计阶段，系统开发及部署等方面有着强大的支持，同时加上对10种编程语言的正反向工程，项目管理，文档生成，数据建模等方面。可以让系统开发中各个角色都获得最好的开发效率。
2.生命周期软件设计方案——Enterprise Architect是以目标为导向的软件系统。它覆盖了系统开发的整个周期，除了开发类模型之外，还包括事务进程分析，使用案例需求，动态模型，组件和布局，系统管理，非功能需求，用户界面设计，测试和维护等。&
3.EA的特性：快速、稳定、高性能
结构图表：类、对象、合成元素、包、组件、布局；&
行为图表：使用案例、通信、序列、交互概述、行为、状态、时序；&
扩展：分析（简单行为）、定制（需求、变动和UI设计）。&
二、创建新项目
1.安装好了EA后，启动软件。点击“创建新的项目”，打开创建新项目对话框。
&2.创建工程 ：
依次点击“File-&New Project-&命名保存-&在“Select model”中选择需要创建的类型（如图1）-&单击“OK”确认，得到界面如图2所示
& & & & & & & & & & & & & & & & & & & & & & & & & &&
【图2】 &&
& && & & & & & & &
Business Process
Requirements
Domain Model
数据库设计
Deployment
Maintenance
Project Management
User Interface
& & & & 表-1
3.创建“Class”模型
& & 【图3】
&Class Elements
Enumeration
对象通信信号的描述
Association
Class Relationships
Generalize
Associate Class
Package Merge
Package Import
Constraint
文档：附加文档附件
人工：表示任意的系统任意的信息块
Requirement
Dependency
Information Flow
& & & & & & &表-2
4.EA软件配置
我们发现，在默认情况下“Class”所显示的名称是Test，但如果我们需要显示别名的时候，我们需要进行以下设置：
& & & & & & & & 【图4】
& & & & & & & & &【图5】
在生成类后，我们可以加入一些变量（在类元件上右键“变量”），变量主要将保存类本身的一些数据，如同人的性别，年龄等数据特征一样。比如我们注册类，也有数据链接的变量（它需要知道自己是和哪个数据库打交道的），还可能有着每IP单日注册数量限制的数据变量等等。
& & & & & & & & & 【图6】
类还需要加入方法（在类元件上右键“方法”），比如说注册类中，需要检查输入的验证码，需要进行数据操作，需要检查单日注册数量等等。在类的方法里面，我们还可以设置每个方法的参数，参数类型，还有参数的备注，这将在代码工程内，直接作为参数和方法的注释生成到代码文件内。
& & & & & & & & & & & & & & & & & & & & & & & &
& & & & & & & & & & & & &【图7】
各个类之间，可能存在着一些关系，那么我们使用关联来表达这些关系。常用的有继承关系（Generalize，或者叫派生类）。例如注册的时候，我们可能有些特殊的注册方式，比如接收了VIP卡号的人员注册。VIP注册比普通注册多了一些步骤，比如验证VIP卡号有效性等。这个VIP注册类，就继承于注册类，拥有了全部普通注册的功能，但是又有一些自己特有的功能，这样就能体现了代码的可重用性。同时在代码生成的时候，会加上“extends”这个关键字来标识他们的关系。
& & & & & & & & & & & & & & & 【图8】
三、其他图形的使用
& & & & & & & & & &【图9】
对象图（Object），这是类图的一种补充，主要是演示了系统中各个类，在不同的场景中，实例化之后所做的不同事情。
交互图（interaction），协作图（communication）和时序图（Timing），他们都是体现了系统中一些实体之间的互相交互的行为。协作图是侧重与表达实体之间的协作交互，在新版的UML中，协作图也叫通讯图，更能体现了实体之间是以通讯的方式来进行协作的原理。而时序图是强调了各个实体件进行交互的前后顺序。例如发送注册成功的提示邮件，那么是发生在注册类检验输入数据之后，而不能是之前。
另外，还有一些其他的图形，比如状态图（State），部署图（Deployment），组件图（component），活动图（Activity），这些请参考相关文档。同时EA支持的图形有非常的多，其中思维图（表达和辅助了思维的思考过程），WEB模型图（表现了网站上部署的模型结构）是最近几个版本中才出现的。
六、数据建模
在数据模型图（Data Modeling）中，EA支持13种不同型号的数据库建模，可直接生成建表SQL语句，同时也可以通过ODBC，导入已存在的数据表结构。
&&&&&&&&&&&&&&&&&&&&&&&& 【图10】
下例我们建立一个学生宿舍人员组成的数据表，表类型使用的是SQL。首先是建立了一个数据表元件，然后设置它的属性。
加入字段（表元件上右键“变量”），设置字段的数据类型，长度，设成主键等。这里可以使用中文作为字段名，在“别名”处才写上英文字段名，在生成SQL的时候，选择“使用可用的别名”就可以生成英文名称的字段名。
生成建表SQL，点击数据模型的上级包，然后选择“项目”–《“数据建模”》– “生成SQL代码”，打开生成SQL的对话框。
&&&&&&&&&&&&&&&&&&&&& 【图13】
设置好了后，点击生成，就可以生成了一个完整的SQL建表语句了。
下面是代码生成的效果。
create database newssystem
--建立类别表
create table register
id int identity(1,1)primary
name varchar(20)not null
以上就是EA建模工具的使用，如有出入，还请见谅。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：228216次
积分：4877
积分：4877
排名：第4086名
原创：147篇
评论：1065条
阅读：15218
(2)(5)(8)(2)(3)(1)(10)(5)(11)(3)(1)(1)(2)(1)(6)(6)(3)(46)(27)(3)(6)HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
作者：佚名
字体：[ ] 来源：互联网 时间：04-24 16:08:40
HTML5新增了一个元素canvas，用于绘图使用，其实它的表现和div比较接近（其实他应该属于inline-block），而提供了许多接口，从而轻易的绘制矩形框、园三角形等
初识canvas元素
HTML5新增了一个元素canvas，用于绘图使用，其实它的表现和div比较接近（其实他应该属于inline-block），而提供了许多接口，从而轻易的绘制矩形框、园三角形等
PS：关于HTML5新增元素
经过最近两天的学习，和以前对HTML5的认知，我认为HTML5其实还是HTML4，两者之间没多大的区别，无非是增加了点新东西。我认为HTML5为我们带来的真正意义是：我们可以用javascript做更多的事情了；我们可以用javascript实现更好的产品了。比如HTML5就解决了我们头疼的跨域问题、实时通信API、与现在的canvas之所以HTML5叫HTML5，我认为他是划时代的，比如他让我们用网页开发游戏变成可能；比如他让电脑桌面只剩IE不在是传说（过于夸张）
绘制矩形框
直入正题，我们来绘制一个矩形框看看,这里提供一个颜色选择器用于方便的选择颜色，PS：现在不用jquery编程感觉真麻烦。。。
&问题：定义样式与定义height与width
&一来就遇到了问题，我这里先来截个图：代码如下:&!DOCTYPE html& &html xmlns="http://www.w3.org/1999/xhtml"& &head&
&title&&/title&
&script type="text/javascript"&
function draw() {
//获取canvas对象
var canvas =
document.getElementById('canvas');
if (canvas == null) {
var context = canvas.getContext('2d');
context.fillStyle = '#99d9ea';
context.fillRect(0, 0, 300, 200); //填充画布结束
context.strokeStyle = 'red';
context.fillStyle = 'gray';
context.lineWidth = 1;
context.fillRect(10, 10, 100, 100);
context.strokeRect(10, 10, 100, 100);
context.clearRect(20, 20, 20, 20);
&/script& &/head& &body&
&canvas id="canvas" width=300 height="200" style="border: 1 width: 300 height: 200"&
&button onclick="draw();"&
绘制矩形&/button&
&input type="color" /& &/body& &/html&
　　各位情况canvas元素，图一位设置width与height的情况，图二十用style指定的情况：
可以看到，对于canvas来说，还是老老实实定义高宽的好，别去傻乎乎的用样式了，当然这个问题需要实际研究才能得出最终结论。
好了，现在我们再来看看绘制矩形这个方法：
PS：其实，使用该方法这么麻烦，完全可以将该函数封装下下，使用便会简单许多
1、使用getElementById方法获取绘制对象2、取得上下文getContext('2d')，这都是固定的写法3、指定填充的颜色fillStyle和绘制的颜色strokeStyle，即里面的颜色和边框的颜色4、指定线宽linewidth5、填充/绘制 fillRect/strokeRect 参数为 x,y,width,height6、若是要使其中一块透明，使用clearRect
至此，绘制矩形框便暂时告一段落。
现在我们来绘制圆形，这个说起绘制圆形，其实我原来用js好像写过一个，这里也贴出来看看：代码如下:我是纯js画的圆
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head&
&title&&/title&
&style type="text/css"&
line-height: 1
&script src="/jquery-1.7.1.js" type="text/javascript"&&/script&
&script type="text/javascript"&
//x2 + y2 = r2;
$(document).ready(function () {
//先画x，y
var box = $('#box');
var NUM = 200;
var R = NUM / 2;
var RR = R * R;
for (var i = 0; i &= NUM; i = i + 6) {
//var divX = $('&div style="left:' + i + 'top:' + R + '"&*&/div&')
// var divY = $('&div style="top:' + i + 'left:' + R + '"&*&/div&')
if (ti & R) {
ti = ti - R;
var ty = Math.sqrt((RR - ti * ti));
var y = $('&div style="left:' + (R - ty) + 'top:' + i + '"&*&/div&')
var y1 = $('&div style="left:' + (R + ty) + 'top:' + i + '"&*&/div&')
box.append(y);
box.append(y1);
} else if (ti & R) {
var ty = Math.sqrt((RR - ti * ti));
var y = $('&div style="left:' + (R - ty) + 'top:' + i + '"&*&/div&')
var y1 = $('&div style="left:' + (R + ty) + 'top:' + i + '"&*&/div&')
box.append(y);
box.append(y1);
//box.append(divX);
//box.append(divY);
for (var i = 0; i &= NUM; i = i + 6) {
//var divX = $('&div style="left:' + i + 'top:' + R + '"&*&/div&')
// var divY = $('&div style="top:' + i + 'left:' + R + '"&*&/div&')
if (ti & R) {
ti = ti - R;
var ty = Math.sqrt((RR - ti * ti));
var y = $('&div style="top:' + (R - ty) + 'left:' + i + '"&*&/div&')
var y1 = $('&div style="top:' + (R + ty) + 'left:' + i + '"&*&/div&')
box.append(y);
box.append(y1);
} else if (ti & R) {
var ty = Math.sqrt((RR - ti * ti));
var y = $('&div style="top:' + (R - ty) + 'left:' + i + '"&*&/div&')
var y1 = $('&div style="top:' + (R + ty) + 'left:' + i + '"&*&/div&')
box.append(y);
box.append(y1);
&/script& &/head& &body&
&div id="box" style="width: 504 height: 504 position: top: 20
left: 300 border: 0"&
&/div& &/body& &/html&
话说，他还是比较圆的说。。。
说起画圆、正弦图等肯定会经过一定计算的，所以稍稍复杂点：
① 创建路径
② 创建图形路径
③ 路径创建完成后关闭路径
④ 设定绘制样式调用方法绘制之代码如下: 我是一个圆
&!DOCTYPE html& &html xmlns="http://www.w3.org/1999/xhtml"& &head&
&title&&/title&
&script type="text/javascript"&
function draw() {
//获取canvas对象
var canvas = document.getElementById('canvas');
if (canvas == null) {
var context = canvas.getContext('2d');
context.fillStyle = '#99d9ea';
context.fillRect(0, 0, 300, 200); //填充画布结束
for (var i = 0; i & 5; i++) {
context.beginPath();
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.strokeStyle = 'red';
context.fill();
&/script& &/head& &body&
&canvas id="canvas" width="300" height="200" &
&button onclick="draw();"&
绘制圆&/button&
&input type="color" /& &/body& &/html&
我们来看看绘制圆过程中其它地方都没有问题，但是创建圆路径这块值得考虑：
arc方法参数很多，依次是：xy半径开始弧度（我们一般喜欢角度，所以要转换）结束弧度顺时针或者逆时针true为顺时针其它都好说，主要这个开始角度和结束角度我们来研究下，因为开始我没搞懂，但后来我发现他其实很简单了。。。就是开始的角度和结束的角度嘛，和我们高中学的知识一样的，只不过单位换算Math.PI/180为一度。。。。反正还是没说清楚，对了，记得我们高中画圆的除了圆规和一个计量三角形角度的半圆直尺了吗，我要说的角度就是那个。。。太坑爹了！好像最右边是0度，垂直是90度，水平是180度，既然如此，我们再来看看代码如下: 正时针逆时针
&!DOCTYPE html& &html xmlns="http://www.w3.org/1999/xhtml"& &head&
&title&&/title&
&script type="text/javascript"&
function draw() {
//获取canvas对象
var canvas = document.getElementById('canvas');
if (canvas == null) {
var context = canvas.getContext('2d');
context.fillStyle = '#99d9ea';
context.fillRect(0, 0, 400, 300); //填充画布结束
context.beginPath();
context.arc(80, 80, 50, 0, 180 * Math.PI / 180, true);
context.closePath();
context.fillStyle = 'gray';
context.fill();
context.beginPath();
context.arc(180, 180, 50, 0, 180 * Math.PI / 180, false);
context.closePath();
context.fillStyle = 'gray';
context.fill();
&/script& &/head& &body&
&canvas id="canvas" width="400" height="300"&
&button onclick="draw();"&
绘制圆&/button&
&input type="color" /& &/body& &/html& 我们发现正时针与逆时针还是有所不同的， context.arc(180, 180, 50, 90 * Math.PI / 180, 290 * Math.PI / 180, true);
原谅我这里居然思考了半个小时，我甚至搜索了高中的资料。。。。
于是我好像明白了点什么。。。。。。
moveTo与lineTo
现上实验结果：代码如下: 两次moveto
&!DOCTYPE html& &html xmlns="http://www.w3.org/1999/xhtml"& &head&
&title&&/title&
&script type="text/javascript"&
function draw() {
//获取canvas对象
var canvas = document.getElementById('canvas');
if (canvas == null) {
var context = canvas.getContext('2d');
context.fillStyle = '#99d9ea';
context.fillRect(0, 0, 300, 200); //填充画布结束
context.beginPath();
context.fillStyle = 'gray';
context.strokeStyle = 'black';
context.moveTo(10, 10);
context.lineTo(150, 150);
context.moveTo(10, 10);
context.lineTo(10, 150);
context.closePath();
context.fill();
context.stroke();
&/script& &/head& &body&
&canvas id="canvas" width="300" height="200"&
&button onclick="draw();"&
绘制&/button&
&input type="color" /& &/body& &/html& 代码如下:一次moveto
&!DOCTYPE html& &html xmlns="http://www.w3.org/1999/xhtml"& &head&
&title&&/title&
&script type="text/javascript"&
function draw() {
//获取canvas对象
var canvas = document.getElementById('canvas');
if (canvas == null) {
var context = canvas.getContext('2d');
context.fillStyle = '#99d9ea';
context.fillRect(0, 0, 300, 200); //填充画布结束
context.beginPath();
context.fillStyle = 'gray';
context.strokeStyle = 'black';
context.moveTo(10, 10);
context.lineTo(150, 150);
context.moveTo(10, 10);
context.lineTo(10, 150);
context.closePath();
context.fill();
context.stroke();
&/script& &/head& &body&
&canvas id="canvas" width="300" height="200"&
&button onclick="draw();"&
绘制&/button&
&input type="color" /& &/body& &/html&代码如下:三次moveto
&!DOCTYPE html& &html xmlns="http://www.w3.org/1999/xhtml"& &head&
&title&&/title&
&script type="text/javascript"&
function draw() {
//获取canvas对象
var canvas = document.getElementById('canvas');
if (canvas == null) {
var context = canvas.getContext('2d');
context.fillStyle = '#99d9ea';
context.fillRect(0, 0, 300, 200); //填充画布结束
context.beginPath();
context.fillStyle = 'gray';
context.strokeStyle = 'black';
context.moveTo(10, 10);
context.lineTo(150, 150);
context.moveTo(10, 10);
context.lineTo(10, 150);
context.moveTo(10, 150);
context.lineTo(150, 150);
context.closePath();
context.fill();
context.stroke();
&/script& &/head& &body&
&canvas id="canvas" width="300" height="200"&
&button onclick="draw();"&
绘制&/button&
&input type="color" /& &/body& &/html&
以上代码几乎一样，但是他产生的结果却不同：
我认为，使用moveto后相当于新开一起点，之前的一笔勾销，若是只使用lineto的话，他会将几个点连成线，若是可以组成图形便会拥有中间色彩
大家感兴趣的内容
12345678910
最近更新的内容}