Mercurial > defr > drupal > scald > dnd

comparison js/bt/other_libs/excanvas_0002/testcases/resizing.html @ 18:0d557e6e73f7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added beautytips and some additional event handling code to the library.
author David Eads <eads@chicagotech.org>
date Fri, 06 Mar 2009 14:11:46 -0600
parents
children
comparison
equal deleted inserted replaced
17:1a77f87927dd 18:0d557e6e73f7
1 <html>
2 <head>
3 <title>ExplorerCanvas Text Case</title>
4 <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
5 <script>
6 // Safari is known not to handle resizing well, expect this to
7 // compare to Firefox
8
9 var cv, ctx, size = 80;
10 var img = new Image();
11 img.src = "../examples/ff.jpg";
12
13 function a() {
14 cv = document.getElementById("aa");
15 ctx = cv.getContext("2d");
16
17 l();
18 }
19
20 function l() {
21 size = (size + 1) % 800;
22 cv.width = Number(size + 200);
23 cv.height = Number((size + 200) / 2);
24
25 // Firefox autoclears the canvas at this point
26
27 ctx.save();
28 ctx.translate(50, 50);
29 ctx.scale(0.1, 0.1);
30 ctx.rotate(size/800 * Math.PI*8);
31 ctx.drawImage(img, 0, -75);
32 ctx.restore();
33
34 ctx.save();
35 ctx.beginPath();
36 ctx.moveTo(0, 0);
37 ctx.lineTo(cv.width, cv.height);
38 ctx.moveTo(20, 20);
39 ctx.lineTo(80, 20);
40 ctx.lineTo(80, 80);
41 ctx.lineTo(20, 80);
42 ctx.stroke();
43 ctx.closePath();
44 ctx.restore();
45
46 ctx.save();
47 ctx.beginPath();
48 ctx.scale(size / 200, size / 200);
49 ctx.arc(100, 50, 20, 0, Math.PI, true);
50 ctx.fill();
51 ctx.restore();
52
53 setTimeout(l, 50);
54 }
55 </script>
56 <style>
57 canvas {
58 background-color:#eee;
59 }
60 </style>
61 </head>
62 <body onload="a();">
63 <canvas id="aa" width="200" height="200"></canvas>
64 </body>
65 </html>