Mercurial > hg > extraction-interface

comparison geotemco/lib/excanvas/testcases/stroke-scale-rotate.html @ 0:b12c99b7c3f0

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