1、图形简介
与html5不同,Raphael提供了以下基本图形:矩形、圆形、椭圆形(html5只有矩形)。
Paper.rect(x,y,width,height,r):绘制矩形;
参数含义:
x,y:矩形左上角相对于原点(0,0)的坐标;
width,height:矩形的宽度和高度;
r:矩形圆角的半径;
Paper.circle(x,y,r):绘制圆形;
参数含义:
x,y: 圆心相对于原点(0,0) 的坐标;
r:圆的半径;
Paper.ellipse(x,y,cx,cy):绘制椭圆形;
参数含义:
x,y: 椭圆的圆心相对于原点(0,0)的坐标;
cx:椭圆横轴的半径;
cy:
椭圆纵轴的半径 ;
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 = new Raphael('raphael_1',400,400);
//绘制普通矩形
raphael.rect(20,10,100,70);
//绘制带有圆角的矩形
raphael.rect(20,100,100,70,20);
//绘制圆形
raphael.circle(200,50,40);
//绘制椭圆形
raphael.ellipse(330,50,50,30);
raphael.ellipse(330,140,30,50);
});
</script>
</head>
<body>
<div id="raphael_1" class="wraper"></div>
</body>
</html>
代码实现的效果:
- 大小: 2.8 KB
分享到:
相关推荐
raphael-min.js
刚刚开始学习这个,以后会有资料陆续传上来
资源 https://github.com/Empact/Raphael-Radar
raphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.jsraphael-uncompressed.js
raphael是jquery的插件,可以轻松实现SVG能实现的功能,在WEB前端进行绘制图形,由于SVG只能在IE9以上使用,该插件兼容了IE9以下版本使用VML进行绘制,而且操作比SVG更加简单,是绘制WEB自定义图形的较好的插件,内...
raphael.js和raphael-min.js文件2.12版本,亲测可用,分享一下
raphae图形绘制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
web 绘图 工具,raphael.可以在网页上绘图,功能非常强大!
raphael中文帮助文档(API)chm文档,因为在网上没有找到好的离线版的,都是在线的,所以自己根据在线的生成了一个chm帮助文档,下载了,绝对不会让你失望。
利用raphael.js进行流程图的绘制,js已封装好,可直接传入数据进行使用
react-raphael-webpack-es6 与React,Raphael.js,Webpak和ES6一起整理了项目设置。 目的是将Raphael.js与React结合使用,看看它是好还是完全怪异。
Raphael.JSON Raphael.Export Raphael.FreeTransform raphael.serialize
前端项目-raphael,JavaScript Vector Library
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-socket.io-express-mongoose 展示 [Node.js]( ), [Raphael.js]( ), [Socket .io]( ), [Express.js]( ), [Mongoose.js]( ) 和 [MongoDB]( ) 集成 需要 MongoDB 要正确运行 Web 应用程序,您需要在系统中...
Raphaël:跨浏览器矢量图形的简便方法访问图书馆网站以获取更多信息: 快速入门指南您需要安装NPM才能构建库。 git clone ...
raphael