贝塞尔曲线的基础知识
其它的什么都不说了,直接上代码:
<!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次贝塞尔的效果
- 大小: 12 KB
- 大小: 14.7 KB
分享到:
相关推荐
raphael-min.js
刚刚开始学习这个,以后会有资料陆续传上来
资源 https://github.com/Empact/Raphael-Radar
raphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.js
Raphael矢量库的扩展。 它使Raphael能够导入原始SVG数据。前叉音符这是的分支。 当原始raphael-svg-import达到0.0.3时,引入了一个重大的向后不兼容更改。 它没有解析SVG文档,而是使用正则表达式。 由于以下几个...
Raphael-Scala-js Raphael.js的Scala.js绑定 要将Raphael-Scala-js添加到您的Scala.js项目中,请将其包含在build.sbt中 resolvers + = " Sonatype snapshots " at " ...
0001-Raphael-Shopping-Cart-Vanilla-Challenge:Carrinho de Compras em Vanilla Javascript
raphae图形绘制JS
react-raphael-webpack-es6 与React,Raphael.js,Webpak和ES6一起整理了项目设置。 目的是将Raphael.js与React结合使用,看看它是好还是完全怪异。
raphael中文帮助文档(API)chm文档,因为在网上没有找到好的离线版的,都是在线的,所以自己根据在线的生成了一个chm帮助文档,下载了,绝对不会让你失望。
#raphael-socket.io-express-mongoose 展示 [Node.js]( ), [Raphael.js]( ), [Socket .io]( ), [Express.js]( ), [Mongoose.js]( ) 和 [MongoDB]( ) 集成 需要 MongoDB 要正确运行 Web 应用程序,您需要在系统中...
用raphael js 制作图表,里面包含饼图、柱状图、曲线图的实例
web 绘图 工具,raphael.可以在网页上绘图,功能非常强大!
利用raphael.js进行流程图的绘制,js已封装好,可直接传入数据进行使用
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you ...
Raphael.JSON Raphael.Export Raphael.FreeTransform raphael.serialize
前端项目-raphael,JavaScript Vector Library
Raphaël:跨浏览器矢量... 您可以使用: raphael.min.js (包括eve和它的最小化) raphael.js (包含eve且未缩小) raphael.no-deps.js (不包括eve它没有缩小) raphael.no-deps.min.js (不包括eve )从哪儿开始检查
raphael
Raphael.js PDF文档,说明Raphael.js的优点与D3的区别,以及由浅入深的范例