Raphael 是一個(gè)用于在網(wǎng)頁(yè)中繪制矢量圖形的 Javascript 庫(kù)。它使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ)，你可以通過 JavaScript 操作 DOM 來(lái)輕松創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線圖等各種圖表，還可以繪制任意形狀的圖形，可以進(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 文件，然后就可以繪制任意的矢量圖形了：

11// 在坐標(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 Playground

Reflection

Image rotation

Text rotation

GitHub-a-like impact chart

GitHub-a-like punch chart

GitHub-a-like languages chart

Raphaël Analytics chart

Polar Clock

Dynamic Spinner

Australian Map

Dancing Helvetica

Multichart

Animation

Tiger

Hand

Interactive Chart

Diagram

Custom Fonts

Animation Easing

Gradients Example

Curver

Animation along the path demo

3D Shooter

Colour Picker

Growing Pie

Bounce

World Map

實(shí)用網(wǎng)站：

Raphael 官方網(wǎng)站地址：http://raphaeljs.com

Raphael 英文參考文檔：http://raphaeljs.com/reference.html

Raphael 中文幫助文檔：http://julying.com/lab/raphael-js/docs/

教程推薦：

Raphael 簡(jiǎn)介：HTML5 Rocks：Introduction to Raphaël.js

Raphael 新手入門教程：An Introduction to the Raphael JS Library

Raphael 繪制柱狀圖表：Creating a chart with raphael.js

標(biāo)簽： 矢

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。