4_canvas.html 751 B

123456789101112131415161718192021222324252627282930
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .can{
  9. background-color: black;
  10. /* width: 900px;
  11. height: 200px; */
  12. position: fixed;
  13. top:40%;
  14. left: 40%;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <canvas class="can" width="400" height="400"></canvas>
  20. <script>
  21. var oCan = document.getElementsByClassName("can")[0];
  22. var aCan = oCan.getContext("2d");
  23. aCan.strokeStyle = "white";
  24. aCan.lineWidth = 5;
  25. aCan.moveTo(0,0);
  26. aCan.lineTo(100,100);
  27. aCan.stroke();
  28. </script>
  29. </body>
  30. </html>