Raphael一個(gè)用于在網(wǎng)頁(yè)中繪制矢量圖形的Javascript庫(kù)
更新時(shí)間：2013年01月08日 16:22:42 作者：
Raphael是一個(gè)用于在網(wǎng)頁(yè)中繪制矢量圖形的Javascript庫(kù),它使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ)，你可以通過(guò) JavaScript 操作 DOM 來(lái)輕松創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線(xiàn)圖等各種圖表,接下來(lái)詳細(xì)介紹，感興趣的朋友可以了解下哦
Raphael 是一個(gè)用于在網(wǎng)頁(yè)中繪制矢量圖形的 Javascript 庫(kù)。它使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ)，你可以通過(guò) JavaScript 操作 DOM 來(lái)輕松創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線(xiàn)圖等各種圖表，還可以繪制任意形狀的圖形，可以進(jìn)行圖表或圖像的裁剪和旋轉(zhuǎn)等復(fù)雜操作。
Raphaël 是跨瀏覽器的矢量圖形庫(kù)，目前支持的瀏覽器包括： Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+ 以及 Internet Explorer 6.0+。
如何使用？
在頁(yè)面中引入 raphael.js 文件，然后就可以繪制任意的矢量圖形了：
// 在坐標(biāo)（10,50）創(chuàng)建寬320，高200的畫(huà)布
var paper = Raphael(10, 50, 320, 200);
// 在坐標(biāo)（x = 50, y = 40）繪制半徑為 10 的圓
var circle = paper.circle(50, 40, 10);
// 給繪制的圓圈填充紅色 (#f00)
circle.attr("fill", "#f00");
// 設(shè)置畫(huà)筆（stroke）的顏色為白色
circle.attr("stroke", "#fff");
Raphaël 是跨瀏覽器的矢量圖形庫(kù)，目前支持的瀏覽器包括： Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+ 以及 Internet Explorer 6.0+。
如何使用？
在頁(yè)面中引入 raphael.js 文件，然后就可以繪制任意的矢量圖形了：
復(fù)制代碼 代碼如下:
// 在坐標(biāo)（10,50）創(chuàng)建寬320，高200的畫(huà)布
var paper = Raphael(10, 50, 320, 200);
// 在坐標(biāo)（x = 50, y = 40）繪制半徑為 10 的圓
var circle = paper.circle(50, 40, 10);
// 給繪制的圓圈填充紅色 (#f00)
circle.attr("fill", "#f00");
// 設(shè)置畫(huà)筆（stroke）的顏色為白色
circle.attr("stroke", "#fff");
您可能感興趣的文章:
相關(guān)文章
jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
這篇文章主要介紹了jquery序列化form表單,使用ajax提交后處理返回的json數(shù)據(jù)的示例,需要的朋友可以參考下2014-03-03
使用jQuery mobile NuGet讓你的網(wǎng)站在移動(dòng)設(shè)備上同樣精彩
這篇文章主要介紹了使用jQuery mobile NuGet讓你的網(wǎng)站在移動(dòng)設(shè)備上同樣精彩，使用jQuery mobile NuGet包，改變共享的布局和視圖，并使你的網(wǎng)站在傳統(tǒng)的瀏覽器和大部分手機(jī)展現(xiàn)的都很好。,需要的朋友可以參考下2019-06-06
jQuery的cookie插件實(shí)現(xiàn)保存用戶(hù)登陸信息
保存用戶(hù)登陸信息的方法有很多，本文為大家介紹的這個(gè)方法是通過(guò)cookie插件來(lái)實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
查詢(xún)功能是開(kāi)發(fā)中最重要的一個(gè)功能，大量數(shù)據(jù)的顯示，我們用的最多的就是分頁(yè)。2011-02-02
JQuery EasyUI 日期控件如何控制日期選擇區(qū)間
這篇文章主要介紹了JQuery EasyUI 日期控件如何控制日期選擇區(qū)間,需要的朋友可以參考下2014-05-05
jquery 操作單選框，復(fù)選框，下拉列表實(shí)現(xiàn)代碼
jquery 操作單選框，復(fù)選框，下拉列表實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-10-10
JQuery each()函數(shù)如何優(yōu)化循環(huán)DOM結(jié)構(gòu)的性能
each()方法能使DOM循環(huán)結(jié)構(gòu)簡(jiǎn)潔，不容易出錯(cuò)。each()函數(shù)封裝了十分強(qiáng)大的遍歷功能，使用也很方便，它可以遍歷一維數(shù)組、多維數(shù)組、DOM, JSON 等等在javaScript開(kāi)發(fā)過(guò)程中使用$each可以大大的減輕我們的工作量2012-12-12
jQuery實(shí)現(xiàn)為動(dòng)態(tài)添加的元素綁定事件實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)為動(dòng)態(tài)添加的元素綁定事件,結(jié)合實(shí)例形式分析了jQuery常見(jiàn)的事件綁定相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-09-09
jQuery動(dòng)態(tài)創(chuàng)建html元素的常用方法匯總
這篇文章主要介紹了jQuery動(dòng)態(tài)創(chuàng)建html元素的常用方法,包括jQuery追加元素、遍歷數(shù)組以及使用模板等方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-09-09
JQuery選擇器之六 測(cè)試代碼如下2009-07-07