Raphael一個(gè)用于在網(wǎng)頁中繪制矢量圖形的Javascript庫
更新時(shí)間：2013年01月08日 16:22:42 作者：
Raphael是一個(gè)用于在網(wǎng)頁中繪制矢量圖形的Javascript庫,它使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ)，你可以通過 JavaScript 操作 DOM 來輕松創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線圖等各種圖表,接下來詳細(xì)介紹，感興趣的朋友可以了解下哦
Raphael 是一個(gè)用于在網(wǎng)頁中繪制矢量圖形的 Javascript 庫。它使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ)，你可以通過 JavaScript 操作 DOM 來輕松創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線圖等各種圖表，還可以繪制任意形狀的圖形，可以進(jìn)行圖表或圖像的裁剪和旋轉(zhuǎn)等復(fù)雜操作。
Raphaël 是跨瀏覽器的矢量圖形庫，目前支持的瀏覽器包括： Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+ 以及 Internet Explorer 6.0+。
如何使用？
在頁面中引入 raphael.js 文件，然后就可以繪制任意的矢量圖形了：
// 在坐標(biāo)（10,50）創(chuàng)建寬320，高200的畫布
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è)置畫筆（stroke）的顏色為白色
circle.attr("stroke", "#fff");
Raphaël 是跨瀏覽器的矢量圖形庫，目前支持的瀏覽器包括： Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+ 以及 Internet Explorer 6.0+。
如何使用？
在頁面中引入 raphael.js 文件，然后就可以繪制任意的矢量圖形了：
復(fù)制代碼 代碼如下:
// 在坐標(biāo)（10,50）創(chuàng)建寬320，高200的畫布
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è)置畫筆（stroke）的顏色為白色
circle.attr("stroke", "#fff");
相關(guān)文章
這篇文章主要介紹了JQuery顯示隱藏頁面元素的方法總結(jié),本文分別講解了show()、hide()、toggle()、slideDown()、css()5種控制顯示隱藏某個(gè)DIV或P標(biāo)簽等頁面元素的方法,需要的朋友可以參考下2015-04-04
jquery實(shí)現(xiàn)html頁面先加載內(nèi)容過幾秒后顯示數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于jquery實(shí)現(xiàn)html頁面先加載內(nèi)容過幾秒后顯示數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
JQuery設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式
設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式，通過jquery來實(shí)現(xiàn)，需要注意的是中間用逗號(hào)隔開，感興趣的朋友可以參考下2013-08-08
xheditor和validate都是優(yōu)秀的jQuery插件，但將兩者組合到起，如果初始化的順序不當(dāng)，則會(huì)出現(xiàn)一些微妙的結(jié)果。2010-04-04
這篇文章主要介紹了Jquery 實(shí)現(xiàn)grid綁定模板的相關(guān)資料,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了jquery+html仿翻頁相冊(cè)功能，前端實(shí)現(xiàn)的相冊(cè)模仿功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
圖片旋轉(zhuǎn)任意角度在某些應(yīng)用中時(shí)很有必要的，現(xiàn)在有一款JQuery插件可以辦得到，接下來為大家介紹下使用方法，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-03-03
jQuery彈出層插件popShow(改進(jìn)版)用法示例
這篇文章主要介紹了jQuery彈出層插件popShow(改進(jìn)版)用法,對(duì)比前文分析了popShow插件的使用方法,需要的朋友可以參考下2017-01-01
jquery動(dòng)態(tài)更換設(shè)置背景圖的方法
這篇文章主要介紹了jquery動(dòng)態(tài)更換網(wǎng)頁背景圖的方法,需要的朋友可以參考下2014-03-03
jquery實(shí)現(xiàn)點(diǎn)擊label的同時(shí)觸發(fā)文本框點(diǎn)擊事件的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊label的同時(shí)觸發(fā)文本框點(diǎn)擊事件的方法,涉及jQuery鼠標(biāo)事件及頁面元素操作的技巧,需要的朋友可以參考下2015-06-06