Mercurial > hg > NetworkVis

annotate d3s_examples/python-neo4jrestclient/static/platin/lib/excanvas/testcases/stroke-scale-rotate.html @ 8:18ef6948d689

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new d3s examples
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Thu, 01 Oct 2015 17:17:27 +0200
parents
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
8
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
1 <!DOCTYPE html>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
2 <html>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
3 <head>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
4 <title>Stroke Scale</title>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
5 <style>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
6
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
7 body {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
8 text-align: center
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
9 }
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
10
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
11 canvas {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
12 background: #eee;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
13 }
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
14
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
15 </style>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
16 <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
17 <script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
18
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
19 // draw a star
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
20 function drawStar (ctx, r){
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
21 ctx.save();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
22
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
23 ctx.beginPath();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
24 ctx.rotate(-Math.PI / 10);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
25 ctx.scale(r, r);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
26 ctx.moveTo(1, 0);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
27 ctx.lineWidth = ctx.lineWidth / r;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
28
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
29 for (var i = 0; i < 9; i++) {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
30 ctx.rotate(Math.PI / 5);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
31 if (i % 2 == 0) {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
32 ctx.lineTo(0.3819653016466596, 0);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
33 } else {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
34 ctx.lineTo(1, 0);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
35 }
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
36 }
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
37 ctx.closePath();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
38 ctx.fill();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
39 ctx.stroke();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
40
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
41 ctx.restore();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
42 }
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
43
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
44 window.onload = function() {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
45 var ctx = document.getElementById('c').getContext('2d');
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
46
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
47 ctx.save();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
48
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
49 ctx.translate(100.5, 100);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
50 ctx.lineWidth = 1;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
51
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
52 ctx.beginPath();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
53 ctx.moveTo(0, 0);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
54 ctx.lineTo(50, 0);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
55 ctx.scale(1, 2);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
56 ctx.rotate(Math.PI / 2);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
57 ctx.lineTo(25, -50)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
58 ctx.rotate(Math.PI / 2);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
59 ctx.lineTo(0, -25)
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
60 ctx.scale(1, 2);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
61 ctx.closePath();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
62 ctx.stroke();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
63
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
64 ctx.restore();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
65
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
66 ctx.translate(50, 50);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
67
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
68 ctx.fillStyle = 'white';
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
69 ctx.strokeStyle = 'blue';
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
70 drawStar(ctx, 20);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
71 };
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
72
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
73 </script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
74 </head>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
75 <body>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
76
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
77 <canvas id=c width=500 height=500></canvas>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
78
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
79 </body>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
80 </html>