raphael入门到精通---入门篇之总览

时间：2023-03-09 15:52:12
raphael入门到精通---入门篇之总览

什么是Raphael

raphael.js是一小巧的javascript库，它可以在web上画矢量图简化你的工作，如果你想创建你指定的图表，图形区域或者可移动的组件，那么就使用raphael吧

话不多说，开始我们的学习吧！！！！！！！

一个小栗子

 <html>

     <head></head>

     <script type="text/javascript" src="raphael-min.js"></script>

     <body>

         <div id="raphael"></div>

         <script type="text/javascript">

             var paper = Raphael(10, 50, 320, 200);

             var circle = paper.circle(50, 40, 10);

             circle.attr("fill", "#f00");

             circle.attr("stroke", "#fff");

         </script>

     </body>

 </html>

这是官网的一个demo,第七行Raphael是构造函数（具体构造参数将在后面章节介绍）,它返回一个paper对象，第8行通过paper对象实例调用方法画圈圈，而第9，10行给圈圈增加参数，哈哈，效果粗来了吧

Raphael就是我们遇到的第一个对象，也是raphael.js最大的一个对象，它有几种构造方式，全部返回paper对象（具体构造方式请查阅API文档）

返回的paper对象实例我们就可以通过它来画圆（circle）、椭圆(eclipse)、图片(image)、方形(rect)、文本(text)、矢量图（path）

生成完图形之后就是给图形元素增加各种属性（attr）

所以总结下来raphael的开发步骤

  1. 通过Raphael获得画布（paper）
  2. 通过画布（paper）画图
  3. 为你的图增加动画以及各项属性

实例练习

<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的属性！！！敬请期待

文笔不好欢迎拍砖

相关文章