Raphael属性学习--基本

最新推荐文章于 2023-07-09 23:47:22 发布

Jatham

最新推荐文章于 2023-07-09 23:47:22 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： Raphael javascript html

jathams（人勤事事易，人懒事事难）

本文链接：https://blog.csdn.net/Jatham/article/details/65936722

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用步骤：
a：下载Raphael.js并导入相应的页面（推荐放在下部，HTML的编译过程是有顺序的，放在title下边，容易导致页面加载过程中的中断现象）
b:定义画布。
在浏览器视图中定义：
   var paper = Raphael.paeper(x,y,width,height);xy分别为画布的绝对位置，width和height为画布的宽和高
给指定元素定义画布：
var paper = Raphael.paper(“指定的元素id”,width,height)
     例如：
           <div id=”test”><div/>
           <script>
               varpaper = Raphael.paper(“test”,300,300);
           <script/>

c:使用。
Raphael的三个基本图形：圆形，椭圆和矩形
画圆：
    var cir = paper.circle(s,y,r);三个参数分别是xy坐标和半径r
画矩形：
    var rect = paper.rect(x,y,width,height,r)
    xy为坐标
    width和height为宽和高
    r为圆角半径
椭圆：
    var ellipse = paper.ellipse(x,y,水平半径，垂直半径)四个参数都为必填

Raphael的复杂图形
对于复杂图形，Raphael. path([pathString])
    pathString SVG格式的路径字符串：路径字符串由一个或多个命令组成。每个命令以一个字母（大写代表命令是绝对的||小写代表命令是绝对的）开始，随后是逗号（，）分割的参数，
    例如：“M10,20L30,40”

M与参数（10,20）相连，L与参数（30,40）相连

M   移动到（moveTo）      （x y）+
Z    闭合参数（closepath）   （none）
L    直线（lineTo）           ()
H    水平直线
V    垂直直线
C    曲线（curveto）
S    平滑曲线
Q    二次赛贝尔曲线
T    平滑二次赛贝尔曲线
A    椭圆弧
R    catmull-Rom