Raphaël 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Raphaël 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript
操作系统: 跨平台
收录时间: 2009-09-07
提 交 者: 红薯

Raphaël.js 是一个小型的 JavaScript 库,用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。

Raphaël.js 使用SVG W3C推荐标准和VML作为创建图形的基础。这意味着你创建的每一个图形对象也是一个DOM对象,所以你可以附加JavaScript事件处理程序或以后 对其进行修改。Raphaël.js目标是提供一个适配器,绘制矢量图兼容大部分浏览器。目前支持的浏览器 Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+。

示例代码:

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");

在线效果演示:http://raphaeljs.com/pie.html

展开阅读全文

代码

Raphaël 的相关博客

raphael参数说明

大纲 https://github.com/DmitryBaranovskiy/raphael http://dmitrybaranovskiy.github.io/raphael/ 形状 名称 参数 说明 re...

Raphael学习笔记(1)--简介

Raphael是一个JavaScript类库,用来在web上绘制矢量图。 Raphael通过判断浏览器的不同,创建svg或vml对象,从而达到跨浏览器的...

使用Raphael实现html中绘图

此博客主要记录小弟的Raphael api学习过程。以及在项目开发中遇到的问题。

Raphael学习笔记(2)--绘图(基本图形)

1、图形简介 与html5不同,Raphael提供了以下基本图形:矩形、圆形、椭圆形(html5只有矩形)。 Paper.rect(x,y,width,heigh...

Raphael学习笔记(5)--绘图(路径【椭圆曲线】)

1、椭圆曲线简介 前面的学习笔记:Raphael学习笔记(3)--绘图(路径【直线】)简单的描述了绘制椭圆曲线的参数,但没有详细的...

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

贝塞尔曲线的基础知识 其它的什么都不说了,直接上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...

对raphael js初步认识

Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 ...

Raphael学习笔记(3)--绘图(路径【直线】)

1、路径简介 Paper.path(pathString):绘制路径; 参数含义: pathString:描述路径的字符串; 下面详细描述一下路径字符串的...

强大的矢量图形库:Raphael JS 中文帮助文档及教程

Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 ...

使用javascript实现跨浏览器绘图相关..

HTML里DOM的canvas对象可以画出各式各样的2D 3D图象,甚至游戏.但IE不支持这个对象,微软不想让javascript太强大. 可以通过SVG...

Raphaël 的相关问答

评论 (4)

加载中
打分: 力荐
Raphaël.js目标是提供一个适配器,绘制矢量图
2018/05/29 17:04
回复
举报
打分: 力荐
拉斐尔
2017/05/05 10:31
回复
举报
这个好似很强大啊 Raphaël
2013/07/13 11:34
回复
举报
高大上 Raphaël
2014/12/08 15:00
回复
举报
更多评论
4 评论
142 收藏
分享
返回顶部
顶部