Raphael学习笔记（4）--绘图（路径【贝塞尔曲线】）

为什么80%的码农都做不了架构师？>>>

贝塞尔曲线的基础知识

其它的什么都不说了，直接上代码：

<!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_2 = new Raphael('raphael_2',400,400);//绘制曲线的起止点和控制点//绘制2次贝赛尔曲线raphael_2.path('M20,120 L100,10 L180,90');raphael_2.path('M20,120 Q100,10 180,90').attr('stroke','red');//绘制曲线的起止点和控制点//绘制2次贝赛尔曲线（第一个是正常绘制，第二个光滑连接）raphael_2.path('M20,370 L120,160 L200,220 L280,280 L380,70');raphael_2.path('M20,370 Q120,160 200,220 T380,70').attr('stroke','red');var raphael_3 = new Raphael('raphael_3',400,400);//绘制曲线的起止点和控制点//绘制3次贝赛尔曲线raphael_3.path('M20,20 L50,80 L150,160 L180,40');raphael_3.path('M20,20 C50,80 150,160 180,40').attr('stroke','red');//绘制曲线的起止点和控制点//绘制3次贝赛尔曲线raphael_3.path('M240,180 L200,100 L380,20 L350,160');raphael_3.path('M240,180 C200,100 380,20 350,160').attr('stroke','red');//绘制曲线的起止点和控制点//绘制3次贝赛尔曲线（第一个是正常绘制，第二个光滑连接）raphael_3.path('M20,370 L40,270 L100,220 L180,280 L260,340 L320,290 L340,190');raphael_3.path('M20,370 C40,270 100,220 180,280 S320,290 340,190').attr('stroke','red');});</script></head>    <body><div id="raphael_2" class="wraper"></div><div id="raphael_3" class="wraper"></div><br/></body>
</html>

2次贝塞尔的效果

3次贝塞尔的效果

转载于:https://my.oschina.net/i33/blog/102464

Raphael学习笔记（4）--绘图（路径【贝塞尔曲线】）相关推荐

Python基础知识学习笔记——Matplotlib绘图
Python基础知识学习笔记--Matplotlib绘图整理python笔记,以防忘记文章目录 Python基础知识学习笔记--Matplotlib绘图一.绘图和可视化 1.导入模块 2.一个简 ...
多路径配置udev_学习笔记:Linux多路径配置 multipath实现设备用户组绑定详细设置...
天萃荷净 Linux多路径软件配置,通过multipath实现设备用户组绑定详细设置现在的Linux系统中,很多都会使用系统自带的multipath多路径软件,在以前的版本中,我们一般通过multi ...
计算机图形学学习笔记（十一）：曲线曲面（三）：B样条曲线与曲面
接上文计算机图形学学习笔记(十):曲线曲面(二):Bezier 曲线与曲面 8.4 B样条曲线产生背景及定义 B样条产生的背景 Bezier 曲线曲面有很多优点,比如说可以用鼠标拖动控制顶点以改变 ...
HTML5实战—canvas绘图之贝塞尔曲线
原文地址:http://www.cnblogs.com/duanhuajian/archive/2012/10/15/2725096.html 1.二次贝塞尔曲线 quadraticCurveTo(c ...
学习笔记07渲染路径+阴影
写的超牛逼! unity shader base pass and additional pass - rexzhao - 博客园 (cnblogs.com) 总的来说就是光照计算方式有很多,有的可以 ...
计算机图形学学习笔记（九）：曲线曲面（一）：参数曲线、参数几何代数形式
接上文计算机图形学学习笔记(八):三维图形变换:三维几何变换,投影变换(平行/ 透视投影) 计算机图形学三大块内容:光栅图形显示(前面已经介绍完了 1-8).几何造型技术.真实感图形显示.光栅图 ...
Spring Boot基础学习笔记13：路径扫描整合Servlet三大组件
文章目录零.学习目标一.创建Spring Boot项目 - IntegrateThreeComponents02 二.使用路径扫描方式整合Servlet三大组件 (一)创建MyServlet类 ( ...
Raphael学习笔记（2）--绘图（基本图形）
为什么80%的码农都做不了架构师?>>> 1.图形简介与html5不同,Raphael提供了以下基本图形:矩形.圆形.椭圆形(html5只有矩形). Paper.rect(x ...
cmake 学习笔记之相对路径编译动态链接库
相对路径编译动态链接库欢迎使用Markdown编辑器欢迎使用Markdown编辑器在学习CMake的过程中在想要编译相对路径的动态链接库时碰到了一大堆问题,特此记录下来. 第一步是编译出动态链接 ...
V-rep学习笔记：机器人路径规划1
Motion Planning Library V-REP 从3.3.0开始,使用运动规划库OMPL作为插件,通过调用API的方式代替以前的方法进行运动规划(The old path/motion ...

Raphael学习笔记（4）--绘图（路径【贝塞尔曲线】）

Raphael学习笔记（4）--绘图（路径【贝塞尔曲线】）相关推荐

最新文章

热门文章