demo2.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <style>
  7. .feedback-overlay-black{
  8. background-color:#000;
  9. opacity:0.5;
  10. position:absolute;
  11. top:0;
  12. left:0;
  13. width:100%;
  14. height:100%;
  15. margin:0;
  16. }
  17. </style>
  18. <style>
  19. div{
  20. padding:20px;
  21. margin:0 auto;
  22. border:5px solid black;
  23. }
  24. h1{
  25. border-bottom:2px solid white;
  26. }
  27. h2{
  28. background: #efefef;
  29. padding:10px;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div style="background:red;">
  35. <div style="background:green;">
  36. <div style="background:blue;border-color:white;">
  37. <div style="background:yellow;"><div style="background:orange;"><h1>Heading</h1>
  38. Text that isn't wrapped in anything.
  39. <p>Followed by some text wrapped in a <b>&lt;p&gt; paragraph.</b> </p>
  40. Maybe add a <a href="#">link</a> or a different style of <a href="#" style="background:white;" id="highlight">link with a highlight</a>.
  41. <hr />
  42. <h2>More content</h2>
  43. <div style="width:10px;height:10px;border-width:10px;padding:0;">a</div>
  44. </div></div>
  45. </div>
  46. </div>
  47. </div>
  48. <script type="text/javascript" src="../build/html2canvas.js"></script>
  49. <script type="text/javascript">
  50. html2canvas(document.body, {
  51. onrendered: function(canvas) {
  52. document.body.appendChild(canvas);
  53. }
  54. });
  55. </script>
  56. </body>
  57. </html>