文档章节

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

李朝强
 李朝强
发布于 2013/10/24 13:22
字数 381
阅读 880
收藏 8

         Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作。Raphaël 是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+

    用法:

    首先,在页面中引入 raphael.js 文件,然后就可以绘制任意的矢量图形了:

// 在坐标(10,50)创建宽320,高200的画布
varpaper = Raphael(10, 50, 320, 200);
 
// 在坐标(x = 50, y = 40)绘制半径为 10 的圆
varcircle = paper.circle(50, 40, 10);
 
// 给绘制的圆圈填充红色 (#f00)
circle.attr("fill","#f00");
 
// 设置画笔(stroke)的颜色为白色
circle.attr("stroke","#fff");

实用网站:

  Raphael 官方网站地址:http://raphaeljs.com

  Raphael 英文参考文档:http://raphaeljs.com/reference.html

  Raphael 中文帮助文档:http://julying.com/lab/raphael-js/docs/

  教程推荐:

  Raphael 简介:HTML5 Rocks:Introduction to Raphaël.js

  Raphael 新手入门教程:An Introduction to the Raphael JS Library

  Raphael 绘制柱状图表:Creating a chart with raphael.js

© 著作权归作者所有

李朝强
粉丝 91
博文 297
码字总数 149962
作品 0
郑州
产品经理
私信 提问
加载中

评论(1)

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

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

喔喔兒
2011/04/10
343
0
Raphael 1.4 发布,小型JavaScript库

Raphael是一个小型JavaScript库,用于简化您的Web矢量图形工作。如果你想创建自己特点的图表或图形的裁剪和旋转部件,你可以使用这个简单方便的库来实现。 Raphael是目前最好的,使用javaScr...

红薯
2010/05/11
433
0
Web 开发中的矢量绘图处理和应用

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

IBMdW
2011/09/03
2.1K
0
Web开发中的矢量绘图(vml,svg)处理和应用

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

kevin_pang
2014/02/25
483
0
前端框架、前端工具记录(更新中....)

一、工具 前端工具库:http://www.w3cfuns.com/tools.php DCloud - HBuilder :http://www.dcloud.io Webstorm:http://www.jetbrains.com/webstorm/ easyicon图标:http://www.easyicon.net......

Liem_
2016/03/05
917
0

没有更多内容

加载失败,请刷新页面

加载更多

爬虫可以采集哪些数据?爬虫借用什么代理可以提高效率

学习爬虫的门槛非常低,特别是通过Python学习爬虫,即使是网上也能找到许多学习爬虫的方法,而且爬虫在数据采集方面效果比较好,比如可以采集几万、上百万网页数据进行分析,带来极有价值的数...

xiaotaomi
27分钟前
4
0
redis自建笔记

自建redis笔记 最近在linux安装了一下redis,特做一些笔记! 本文先单节点启动redis,然后再进行持久化配置,在次基础上,再分享搭建主从模式的配置以及Sentinel 哨兵模式及集群的搭建 单节点...

北极之北
29分钟前
4
0
没想到Spring Boot居然这么耗内存,有点惊讶

Spring Boot总体来说,搭建还是比较容易的,特别是Spring Cloud全家桶,简称亲民微服务,但在发展趋势中,容器化技术已经成熟,面对巨耗内存的Spring Boot,小公司表示用不起。如今,很多刚诞...

程序员修BUG
32分钟前
4
0
Spring Security 实战干货:Spring Boot 中的 Spring Security 自动配置初探

1. 前言 我们在前几篇对 Spring Security 的用户信息管理机制,密码机制进行了探讨。我们发现 Spring Security Starter相关的 Servlet 自动配置都在spring-boot-autoconfigure-2.1.9.RELEASE...

码农小胖哥
34分钟前
4
0
Docker 容器时区时间不一致 问题解决

解决方案: 1,最傻瓜也最方便的处理方式,运行新的容器前设置本机时区和时间文件与容器的映射 docker run -v /etc/timezone:/etc/timezone -v /etc/localtime:/etc/localtime ...1 -v /etc/...

突突突酱
36分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部