subpixel.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!DOCTYPE HTML>
  2. <html>
  3. <!--
  4. Copyright 2007 The Closure Library Authors. All Rights Reserved.
  5. Use of this source code is governed by the Apache License, Version 2.0.
  6. See the COPYING file for details.
  7. -->
  8. <head>
  9. <title>Sub pixel rendering</title>
  10. <script type="text/javascript" src="../../base.js"></script>
  11. <script type="text/javascript">
  12. goog.require('goog.dom');
  13. goog.require('goog.graphics');
  14. </script>
  15. <script type="text/javascript">
  16. function testLineWidth() {
  17. var graphics = goog.graphics.createGraphics(100, 100);
  18. // vertical line
  19. for (var i = 0; i < 100; i++) {
  20. var stroke = new goog.graphics.Stroke(i / 100, 'black');
  21. var path = graphics.createPath();
  22. path.moveTo(49.5, i);
  23. path.lineTo(49.5, i + 1);
  24. path.close();
  25. graphics.drawPath(path, stroke, null);
  26. }
  27. // horizontal line
  28. for (var i = 0; i < 100; i++) {
  29. var stroke = new goog.graphics.Stroke(i / 100, 'black');
  30. var path = graphics.createPath();
  31. path.moveTo(i, 49.5);
  32. path.lineTo(i + 1, 49.5);
  33. path.close();
  34. graphics.drawPath(path, stroke, null);
  35. }
  36. graphics.render();
  37. }
  38. function testLinePos() {
  39. var graphics = goog.graphics.createGraphics(100, 100);
  40. var stroke = new goog.graphics.Stroke(1, 'black');
  41. // vertical line
  42. for (var i = 0; i < 100; i++) {
  43. var path = graphics.createPath();
  44. path.moveTo(49 + i / 100, i);
  45. path.lineTo(49 + i / 100, i + 1);
  46. path.close();
  47. graphics.drawPath(path, stroke, null);
  48. }
  49. // horizontal line
  50. for (var i = 0; i < 100; i++) {
  51. var path = graphics.createPath();
  52. path.moveTo(i, 49.5 + i / 100);
  53. path.lineTo(i + 1, 49.5 + i / 100);
  54. path.close();
  55. graphics.drawPath(path, stroke, null);
  56. }
  57. graphics.render();
  58. }
  59. </script>
  60. </head>
  61. <body>
  62. <script>
  63. testLineWidth();
  64. document.write('<br>');
  65. testLinePos();
  66. </script>
  67. </body>
  68. </html>