Raphael 笔记 参考

1、首先一个页面感知：（复制、粘贴，修改js路径并运行就可见效果）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="frame/include.jsp"%>

2、基本操作
新建画布：var paper = new Raphael('canvas_container', 1000, 700);//三个参数，第一个为div，第二个是宽度，第三个是高度，可以设置为百分比

绘图：包括圆（.circle）、椭圆（.ellipse）、矩形（.rect）、正方形（.rect）、路径作图（.path）

圆：circle2 = paper.circle(100,80, 10);//传入三个参数，前两个组合为圆心坐标，左上为0,0；这里表示距离左边距100，距离上边距80，第三个是圆半径

椭圆：var ellipse = paper.ellipse(200, 300, 200, 50);//跟圆类似，前两个是圆心坐标，第三个为水平方向半径，第四个为竖直方向半径

矩形、正方形:var rectangle =

paper.rect(200, 200, 250, 100);//前两个为矩形左上角距离左上定点的距离，第三个为水平宽度，第四个为竖直高度，为正方形时只需设置水平宽度与竖直高度值相同即可

路径作图：var line = paper.path('M 250,250 l 50,50 l 0,-50 z');//M 250,250 为路径起始位置 l 50,50(此处为小写的L)分为别水平位移和竖直位移量，向左上为负，反之右下为正。最后的z表示结束路径，可以理解为补全的意思，
// 使用这个就可以省去最后也是最麻烦的位移计算，如果不想用，也可以用l num,num（num为计算出来的位移量）替换。
第二种路径作图的表示:var zidingyi = paper.path('M 100,50 h50 v50 h50 v50 h-150 v-50 h50 z');//这种方式只能画出相对屏幕水平或者竖直的线，而不能划斜线。h为水平位移，v为竖直位移正向同样与之前的一样

设置相应的属性：包括动画、元素等等，详见：https://www.360docs.net/doc/4016955939.html,/raphael-js/docs/#Animation.delay 或参考英文官网

上面的页面demo中已经应用了部分简单属性，还在摸索学习中，如果大家有更多的参考资料可以与我分享。