FilesExpand file tree

 master

/

smgraphics.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

40 lines (31 loc) · 1.23 KB

 master

/

smgraphics.js

Top

File metadata and controls

• Code
• Blame

40 lines (31 loc) · 1.23 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

window.onload = function () {

// Creates canvas 320 × 200 at 10, 50

var paper = Raphael("holder", 600, 540);

// Creates circle at x = 50, y = 40, with radius 10

var circle = paper.circle(120, 120, 100);

// Sets the fill attribute of the circle to red (#f00)

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

// Sets the stroke attribute of the circle to black

circle.attr({gradient: "45-#000-#000", opacity: 0.1})

// raphael supports svg path syntax

// see http://www.w3.org/TR/SVG/paths.html

// M = Move, L = Line to, Z = close Path

var p = paper.path("M10 90 L50 30 L 11 11 L 110 100 Z");

p.attr({fill: '#FFFFFF'});

// animate radius to smaller in 2.2s with '<>' animation

circle.animate({r: 50}, 2200, '<>');

setTimeout(function() {

// animate path to new coordinates

p.animate({path: "M10 120 L50 30 L 20 11 L 11 11 L 20 60 L 90 90 Z"}, 1000, 'bounce');

}, 1000);

var dot = paper.circle(10, 90, 10);

dot.attr('fill', '#00F');

dot.animateAlong(p, 1000);

setTimeout(function() {

// animate path to new coordinates

// p.rotate(-90, 90, 90);

p.animate({rotation: '-90, 90, 90'}, 1000, '<>');

dot.animate({rotation: '180, 90, 90'}, 1000, '<>');

}, 2000);

p.animate({fill: "#FA0"}, 2500);

};