raphael入門到精通---入門篇之總覽

時間 2019-11-09

標籤 raphael 入門精通總覽简体版

原文原文鏈接

什麼是Raphael

raphael.js是一小巧的javascript庫，它能夠在web上畫矢量圖簡化你的工做，若是你想建立你指定的圖表，圖形區域或者可移動的組件，那麼就使用raphael吧javascript

話很少說，開始咱們的學習吧！！！！！！！html

一個小栗子

 1 <html>
 2     <head></head>
 3     <script type="text/javascript" src="raphael-min.js"></script>
 4     <body>
 5         <div id="raphael"></div>
 6         <script type="text/javascript">
 7             var paper = Raphael(10, 50, 320, 200);
 8             var circle = paper.circle(50, 40, 10);
 9             circle.attr("fill", "#f00");
10             circle.attr("stroke", "#fff");
11         </script>
12     </body>
13 </html>

這是官網的一個demo,第七行Raphael是構造函數（具體構造參數將在後面章節介紹）,它返回一個paper對象，第8行經過paper對象實例調用方法畫圈圈，而第9，10行給圈圈增長參數，哈哈，效果粗來了吧java

Raphael就是咱們遇到的第一個對象，也是raphael.js最大的一個對象，它有幾種構造方式，所有返回paper對象（具體構造方式請查閱API文檔）web

返回的paper對象實例咱們就能夠經過它來畫圓（circle）、橢圓(eclipse)、圖片(image)、方形(rect)、文本(text)、矢量圖（path）app

生成完圖形以後就是給圖形元素增長各類屬性（attr）eclipse

因此總結下來raphael的開發步驟函數

經過Raphael得到畫布（paper）
經過畫布（paper）畫圖
爲你的圖增長動畫以及各項屬性

實例練習

<html>
    <head></head>
    <script type="text/javascript" src="raphael-min.js"></script>
    <body>
        <div id="raphael"></div>
        <script type="text/javascript">
            var paper = Raphael("raphael", 1000, 1000);
            //畫圓 
            var circle = paper.circle(100, 100, 10);
            circle.attr("fill", "#f00");
            circle.attr("stroke", "#fff");
            //畫橢圓
            var ellipse = paper.ellipse(200, 100, 40, 20);
            ellipse.attr("fill", "#ccc");
            ellipse.attr("stroke", "#000");
            //貼圖 圖片請自帶
            var image = paper.image("apple.jpg", 300, 100, 80, 80);
            //畫路徑 從10.10 移動到90.90
            var path = paper.path("M400 100L500 300");
            // 正常的方形
            var rect1 = paper.rect(500, 100, 50, 50);
            // 帶10弧度的方形
            var rect2 = paper.rect(600, 100, 50, 50, 10);

        </script>
    </body>
</html>

總結

本章介紹了raphael的基本用法，下一章節將介紹raphael的屬性！！！敬請期待學習

文筆很差歡迎拍磚動畫

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。