OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 |
| 3 <html> |
| 4 <head> |
| 5 <title>object-fit on canvas</title> |
| 6 <style type="text/css"> |
| 7 .group > div { |
| 8 display: inline-block; |
| 9 overflow: hidden; |
| 10 width: 72px; |
| 11 height: 72px; |
| 12 margin: 2px 10px; |
| 13 border: 1px solid black; |
| 14 background-color: gray; |
| 15 } |
| 16 |
| 17 .group > * > * { display: block; } |
| 18 .group > *:nth-child(1) * { width:100%; height:100%; } |
| 19 .group > *:nth-child(2) * { width:100%; margin-top:25%; } |
| 20 .group > *:nth-child(3) * { height:100%; margin-left:-50%; } |
| 21 .group > *:nth-child(4) * { width:288px; margin-left:-108px; margin-top:-3
6px; } |
| 22 .group > *:nth-child(5) * { width:100%; margin-top:25%; } |
| 23 .group > *:nth-child(6) * { width:100%; margin-top:25%; } |
| 24 .group > *:nth-child(7) * { width:100%; height:100%; } |
| 25 </style> |
| 26 <script type="text/javascript" charset="utf-8"> |
| 27 if (window.testRunner) |
| 28 testRunner.waitUntilDone(); |
| 29 |
| 30 var circlesImage; |
| 31 |
| 32 function paintCanvas(canvas) |
| 33 { |
| 34 var ctx = canvas.getContext('2d'); |
| 35 ctx.drawImage(circlesImage, 0, 0); |
| 36 } |
| 37 |
| 38 function init() |
| 39 { |
| 40 circlesImage = new Image() |
| 41 circlesImage.addEventListener('load', imageLoaded, false); |
| 42 circlesImage.src = "resources/circles-landscape.png"; |
| 43 } |
| 44 |
| 45 function imageLoaded() |
| 46 { |
| 47 var canvases = document.getElementsByTagName('canvas'); |
| 48 for (var i = 0; i < canvases.length; ++i) |
| 49 paintCanvas(canvases[i]) |
| 50 if (window.testRunner) |
| 51 testRunner.notifyDone(); |
| 52 } |
| 53 |
| 54 window.addEventListener('load', init, false); |
| 55 </script> |
| 56 </head> |
| 57 <body> |
| 58 |
| 59 <div class="group"> |
| 60 <div><canvas width="288" height="144"></canvas></div> |
| 61 <div><canvas width="288" height="144"></canvas></div> |
| 62 <div><canvas width="288" height="144"></canvas></div> |
| 63 <div><canvas width="288" height="144"></canvas></div> |
| 64 <div><canvas width="288" height="144"></canvas></div> |
| 65 <div><canvas width="288" height="144"></canvas></div> |
| 66 <div><canvas width="288" height="144"></canvas></div> |
| 67 </div> |
| 68 |
| 69 </body> |
| 70 </html> |
OLD | NEW |