raphael入门到精通---入门篇之总览
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了raphael入门到精通---入门篇之总览相关的知识，希望对你有一定的参考价值。
什么是Raphael
raphael.js是一小巧的javascript库，它可以在web上画矢量图简化你的工作，如果你想创建你指定的图表，图形区域或者可移动的组件，那么就使用raphael吧
话不多说，开始我们的学习吧！！！！！！！
一个小栗子
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行给圈圈增加参数，哈哈，效果粗来了吧
Raphael就是我们遇到的第一个对象，也是raphael.js最大的一个对象，它有几种构造方式，全部返回paper对象（具体构造方式请查阅API文档）
返回的paper对象实例我们就可以通过它来画圆（circle）、椭圆(eclipse)、图片(image)、方形(rect)、文本(text)、矢量图（path）
生成完图形之后就是给图形元素增加各种属性（attr）
所以总结下来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的属性！！！敬请期待
文笔不好欢迎拍砖
以上是关于raphael入门到精通---入门篇之总览的主要内容，如果未能解决你的问题，请参考以下文章
响应式网页设计Bootstrap开发速成 从入门到精通学习总结入门教程