Mercurial > defr > drupal > scald > dnd
annotate js/bt/other_libs/excanvas_0002/testcases/resizing.html @ 54:d6f510f35e72 tip
Fix a PHP notice
| author | Franck Deroche <franck@defr.org> |
|---|---|
| date | Thu, 19 Aug 2010 12:02:47 +0200 |
| parents | 0d557e6e73f7 |
| children |
| rev | line source |
|---|---|
| eads@18 | 1 <html> |
| eads@18 | 2 <head> |
| eads@18 | 3 <title>ExplorerCanvas Text Case</title> |
| eads@18 | 4 <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]--> |
| eads@18 | 5 <script> |
| eads@18 | 6 // Safari is known not to handle resizing well, expect this to |
| eads@18 | 7 // compare to Firefox |
| eads@18 | 8 |
| eads@18 | 9 var cv, ctx, size = 80; |
| eads@18 | 10 var img = new Image(); |
| eads@18 | 11 img.src = "../examples/ff.jpg"; |
| eads@18 | 12 |
| eads@18 | 13 function a() { |
| eads@18 | 14 cv = document.getElementById("aa"); |
| eads@18 | 15 ctx = cv.getContext("2d"); |
| eads@18 | 16 |
| eads@18 | 17 l(); |
| eads@18 | 18 } |
| eads@18 | 19 |
| eads@18 | 20 function l() { |
| eads@18 | 21 size = (size + 1) % 800; |
| eads@18 | 22 cv.width = Number(size + 200); |
| eads@18 | 23 cv.height = Number((size + 200) / 2); |
| eads@18 | 24 |
| eads@18 | 25 // Firefox autoclears the canvas at this point |
| eads@18 | 26 |
| eads@18 | 27 ctx.save(); |
| eads@18 | 28 ctx.translate(50, 50); |
| eads@18 | 29 ctx.scale(0.1, 0.1); |
| eads@18 | 30 ctx.rotate(size/800 * Math.PI*8); |
| eads@18 | 31 ctx.drawImage(img, 0, -75); |
| eads@18 | 32 ctx.restore(); |
| eads@18 | 33 |
| eads@18 | 34 ctx.save(); |
| eads@18 | 35 ctx.beginPath(); |
| eads@18 | 36 ctx.moveTo(0, 0); |
| eads@18 | 37 ctx.lineTo(cv.width, cv.height); |
| eads@18 | 38 ctx.moveTo(20, 20); |
| eads@18 | 39 ctx.lineTo(80, 20); |
| eads@18 | 40 ctx.lineTo(80, 80); |
| eads@18 | 41 ctx.lineTo(20, 80); |
| eads@18 | 42 ctx.stroke(); |
| eads@18 | 43 ctx.closePath(); |
| eads@18 | 44 ctx.restore(); |
| eads@18 | 45 |
| eads@18 | 46 ctx.save(); |
| eads@18 | 47 ctx.beginPath(); |
| eads@18 | 48 ctx.scale(size / 200, size / 200); |
| eads@18 | 49 ctx.arc(100, 50, 20, 0, Math.PI, true); |
| eads@18 | 50 ctx.fill(); |
| eads@18 | 51 ctx.restore(); |
| eads@18 | 52 |
| eads@18 | 53 setTimeout(l, 50); |
| eads@18 | 54 } |
| eads@18 | 55 </script> |
| eads@18 | 56 <style> |
| eads@18 | 57 canvas { |
| eads@18 | 58 background-color:#eee; |
| eads@18 | 59 } |
| eads@18 | 60 </style> |
| eads@18 | 61 </head> |
| eads@18 | 62 <body onload="a();"> |
| eads@18 | 63 <canvas id="aa" width="200" height="200"></canvas> |
| eads@18 | 64 </body> |
| eads@18 | 65 </html> |