1、椭圆曲线简介
前面的学习笔记：Raphael学习笔记（3）--绘图（路径【直线】）简单的描述了绘制椭圆曲线的参数，但没有详细的介绍各个参数的含义，这次，我们就详细的学习一下椭圆曲线的绘制。
A(a) elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y) ；
参数含义：
rx：横轴的长度；
ry：纵轴的长度；
x-axis-rotation：椭圆的横轴与x轴的角度；
large-arc-flag：区分弧度的大小（0表示小角度弧度，1表示大角度弧度）；
sweep-flag：绘制弧度围绕椭圆中心的方向（0表示逆时针方向，1表示顺时针方向）；
x y：椭圆曲线终点坐标；
2、椭圆曲线实例
为了更好的理解上面的参数描述，请看下面的代码：
<!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>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<style type="text/css">
.wraper {
position: relative;
float: left;
width: 400px;
height: 400px;
margin-left: 10px;
margin-top: 10px;
border: 1px solid orange;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
/*
绘制椭圆曲线
*/
var raphael_4 = new Raphael('raphael_4',400,400);
//绘制左上的椭圆
raphael_4.ellipse(130,40,60,30);
raphael_4.ellipse(70,70,60,30);
raphael_4.path('M70,40 A60,30 0 0,0 130,70').attr('stroke','red');
raphael_4.text(40,30,'start(70,40)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(160,80,'end(130,70)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(70,120,'large-arc-flag=0\nsweep-flag=0')
.attr({
'font-size': 11,
'fill': 'green',
'text-anchor': 'start'
});
//绘制右上的椭圆
raphael_4.ellipse(330,40,60,30);
raphael_4.ellipse(270,70,60,30);
raphael_4.path('M270,40 A60,30 0 0,1 330,70').attr('stroke','red');
raphael_4.text(240,30,'start(270,40)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(360,80,'end(330,70)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(270,120,'large-arc-flag=0\nsweep-flag=1')
.attr({
'font-size': 11,
'fill': 'green',
'text-anchor': 'start'
});
//绘制左下的椭圆
raphael_4.ellipse(130,240,60,30);
raphael_4.ellipse(70,270,60,30);
raphael_4.path('M70,240 A60,30 0 1,0 130,270').attr('stroke','red');
raphael_4.text(40,230,'start(70,240)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(160,280,'end(130,270)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(70,320,'large-arc-flag=1\nsweep-flag=0')
.attr({
'font-size': 11,
'fill': 'green',
'text-anchor': 'start'
});
//绘制右下的椭圆
raphael_4.ellipse(330,240,60,30);
raphael_4.ellipse(270,270,60,30);
raphael_4.path('M270,240 A60,30 0 1,1 330,270').attr('stroke','red');
raphael_4.text(240,230,'start(270,240)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(360,280,'end(330,270)')
.attr({
'font-size':11,
'fill':'blue'
});
raphael_4.text(270,320,'large-arc-flag=1\nsweep-flag=1')
.attr({
'font-size': 11,
'fill': 'green',
'text-anchor': 'start'
});
});
</script>
</head>
<body>
<div id="raphael_4" class="wraper"></div>
</body>
</html>
代码实现的效果：
- 大小: 16.9 KB
分享到：
相关推荐
### Raphael学习笔记 #### 一、Raphael简介 Raphael 是一个轻量级的JavaScript库，用于在HTML页面上创建复杂的矢量图形。它支持各种形状的创建与操作，如圆形、矩形、椭圆等，并且可以通过JavaScript动态改变这些...
内容概要：本文详细介绍了三电平SVPWM模型在Matlab中的搭建与研究，重点探讨了三电平逆变器的工作原理、性能特点以及参数优化方法。文中不仅解释了三电平逆变器相较于传统两电平逆变器的优势，如更高的电压分辨率和更低的谐波失真，还深入讨论了SVPWM控制策略的具体实现步骤，包括扇区划分、中性点电压平衡、死区时间和波形生成等关键环节。此外，文章还强调了仿真与实际应用之间的差异，指出仿真只是调试的起点而非终点。 适合人群：从事电力电子、自动化控制领域的研究人员和技术人员，尤其是对逆变器建模和仿真相关工作的从业者。 使用场景及目标：适用于需要深入了解三电平逆变器特性和优化控制策略的研究项目，旨在帮助读者掌握基于Matlab的三电平SVPWM模型构建技巧，从而更好地进行逆变器性能评估和改进。 其他说明：文章提供了大量实用的Matlab代码片段，便于读者理解和实践。同时提醒读者关注仿真与现实应用间的细微差别，确保理论成果能够顺利转化为实际效益。
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
水利规范-7p倒虹吸工程及渠道防渗衬砌设计图集.zip
JAVAWeb外文文献毕业设计样本.doc
scratch少儿编程逻辑思维游戏源码-我的世界冒险通过 V5.zip
scratch少儿编程逻辑思维游戏源码-星之卡比 动画.zip
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
scratch少儿编程逻辑思维游戏源码-我的世界构建像素立方体.zip
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
scratch少儿编程逻辑思维游戏源码-仙人掌内战.zip
scratch少儿编程逻辑思维游戏源码-贪食蛇.zip
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
复制链接到浏览器打开即可，https://link3.cc/diwangluo
内容概要：本文详细介绍了使用Matlab编写的水果识别程序。首先简述了人工智能和机器学习在水果识别领域的应用背景，强调了Matlab作为强大编程环境的优势。接着，文章逐步讲解了水果识别程序的具体实现流程，涵盖数据预处理、特征提取、模型训练以及最终的识别算法实现。每个环节都采用了先进的技术和方法，如图像去噪、大小调整、深度学习算法（特别是卷积神经网络CNN），并通过训练神经网络模型来提升识别精度。此外，还讨论了相关技术手段和技术挑战，展示了Matlab在图像处理和计算机视觉方面的强大能力。 适合人群：对图像处理、机器学习感兴趣的科研人员、学生及工程师。 使用场景及目标：适用于希望深入了解Matlab环境下水果识别程序的设计与实现的研究者；旨在帮助使用者掌握从数据准备到模型部署的一系列技能，为实际项目提供理论支持和技术指导。 其他说明：文中不仅提供了详细的程序实现步骤，还对未来发展方向进行了展望，鼓励更多人参与到水果识别及相关领域的研究中。
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
内容概要：本文介绍了西门子S7-300 PLC在某汽车生产线的应用，涵盖了从硬件配置到软件编程的各个方面。硬件部分包括300 CPU、TP700触摸屏、远程ET200站点和Profibus DP网络系统。软件部分涉及PLC程序、HMI界面、IO表和图纸。重点在于模块化编程方法，如模拟量采集、气缸控制、线体阻挡、延时控制和自动换班等功能块的集成。同时，文中提到压力值和位移传感器的数据采集，并通过触摸屏以曲线形式展示。此外，还讨论了梯形图、STL和SCL三种编程语言的混合使用，确保程序结构清晰且易于维护。最后强调了Profibus DP网络在各站点间数据传输中的重要作用。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对PLC编程和Profibus DP网络有研究兴趣的人群。 使用场景及目标：适用于汽车制造业及其他类似行业，旨在提高生产线的自动化程度和生产效率，确保产品质量。通过对S7-300 PLC的学习和应用，掌握模块化编程技巧和网络通信协议，优化生产线管理。 阅读建议：读者可以通过本文深入了解S7-300 PLC的具体应用场景和技术细节，特别是模块化编程的优势和混合编程的实际操作。同时，关注Profibus DP网络的作用，理解其在网络架构中的重要地位。
scratch少儿编程逻辑思维游戏源码-数学横版过关游戏.zip
# 压缩文件中包含： 中文文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；