Mercurial > defr > drupal > scald > dnd

annotate js/bt/other_libs/excanvas_0002/testcases/resizing.html @ 38:9e27e0aca323

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Allow the library to specify a possible legend for the element. This legend will be placed *outside* the atom representation, which means that it's freely editable in the rich text and won't be taken over by Scald.
author Franck Deroche <franck@defr.org>
date Fri, 18 Sep 2009 15:17:05 +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>