doc_simple-canvas.html 917 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <!-- Any copyright is dedicated to the Public Domain.
  2. http://creativecommons.org/publicdomain/zero/1.0/ -->
  3. <!doctype html>
  4. <html>
  5. <head>
  6. <meta charset="utf-8"/>
  7. <title>Canvas inspector test page</title>
  8. </head>
  9. <body>
  10. <canvas width="128" height="128"></canvas>
  11. <script type="text/javascript;version=1.8">
  12. "use strict";
  13. var ctx = document.querySelector("canvas").getContext("2d");
  14. function drawRect(fill, size) {
  15. ctx.fillStyle = fill;
  16. ctx.fillRect(size[0], size[1], size[2], size[3]);
  17. }
  18. function drawScene() {
  19. ctx.clearRect(0, 0, 128, 128);
  20. drawRect("rgb(192, 192, 192)", [0, 0, 128, 128]);
  21. drawRect("rgba(0, 0, 192, 0.5)", [30, 30, 55, 50]);
  22. drawRect("rgba(192, 0, 0, 0.5)", [10, 10, 55, 50]);
  23. window.requestAnimationFrame(drawScene);
  24. }
  25. drawScene();
  26. </script>
  27. </body>
  28. </html>