文档章节

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

i33
 i33
发布于 2013/01/16 14:29
字数 387
阅读 172
收藏 1

贝塞尔曲线的基础知识

其它的什么都不说了,直接上代码:


<!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次贝塞尔的效果



本文转载自:http://lblovesnow-163-com.iteye.com/blog/1484746

i33

i33

粉丝 46
博文 241
码字总数 7442
作品 0
东城
私信 提问
Raphael学习笔记(5)--绘图(路径【椭圆曲线】)

1、椭圆曲线简介 前面的学习笔记:Raphael学习笔记(3)--绘图(路径【直线】)简单的描述了绘制椭圆曲线的参数,但没有详细的介绍各个参数的含义,这次,我们就详细的学习一下椭圆曲线的绘制...

i33
2013/01/16
645
0
Web 开发中的矢量绘图处理和应用

矢量绘图一直是 Web 开发中一直比较薄弱的环节。本文首先针对不同浏览器详细阐述不同的矢量绘图解决方案,其中包括 HTML5 Canvas、SVG 以及 VML 等技术;之后针对每种不同的技术介绍其实现和...

IBMdW
2011/09/03
2.1K
0
使用javascript实现跨浏览器绘图相关..

HTML里DOM的canvas对象可以画出各式各样的2D 3D图象,甚至游戏.但IE不支持这个对象,微软不想让javascript太强大. 可以通过SVG/VML+JS模拟canvas来实现跨浏览器的矢量图形实现方案. 这其实和网...

喔喔兒
2011/04/10
344
0
Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 ...

kevin_pang
2014/02/25
488
0
矢量图SVG

前端绘图用的最多的就是svg和canvas,现在有许多基于这两种技术的图形框架,比如基于svg的D3 和基于canvas的echarts 。今天要讲的是基于svg的Raphael Javascript ,它是一个 Javascript的矢量...

雨未浓
2017/11/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

POC挖矿没有前途

最好的工作量证明是能力证明,能力不适合存储。望文生义,能力的本质意义是“能”和“力”(所有的词汇都按照望文生义理解,因为所有不能望文生义的词汇都是不良的已经被前人修正或将来被后人...

NTMiner
23分钟前
6
0
1.3UiPath变量的介绍和使用

一、变量 变量主要用于存储数据,它在RPA中扮演重要的数据传递角色,是RPA编程不可或缺的一部分。它包括变量名称和变量的值,变量的值支持多种数据类型,包括从通用值,文本,数字,数据表,...

chenshi178
24分钟前
3
0
C#将文件保存到Oracle的BLOB字段

private void button1_Click(object sender, EventArgs e) { string cnnstr = "provider=OraOLEDB.Oracle;data source=HWQY;User Id=HWQY;Password=HWQY123;"; OleDbConnection con = new Ol......

_Somuns
32分钟前
3
0
微服务中如何使用RestTemplate优雅调用API(拦截器、异常处理、消息转换)

关注我,可以获取最新知识、经典面试题以及技术分享   在微服务中,rest服务互相调用是很普遍的,我们该如何优雅地调用,其实在Spring框架使用RestTemplate类可以优雅地进行rest服务互相调...

ccww_
33分钟前
18
0
沙龙报名 | 京东云DevOps——自动化运维技术实践

随着互联网技术的发展,越来越多企业开始认识DevOps重要性,在企业内部推进实施DevOps,期望获得更好的软件质量,缩短软件开发生命周期,提高服务稳定性。但在DevOps 的实施与落地的过程中,...

京东云技术新知
39分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部