1. <!--
    2.  * @Author: hhn
    3.  * @Date: 2020-03-14 17:26:03
    4.  * @lastEditTime: Do not edit
    5.  * @Description: In User Settings Edit
    6.  * @FilePath: \codehub\study\studying\html\canva.html
    7. -->
    10. <!DOCTYPE html>
    11. <html lang="en">
    13. <meta charset="utf-8">
    14. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    15. <meta name="viewport" content="width=device-width, initial-scale=1">
    16. <title>HTML5</title>
    17. <link href="https://fonts.googleapis.com/css?family=Lato:400,400i|Roboto:500" rel="stylesheet">
    18. <!-- 为 Internet Explorer 支持而添加的 shiv -->
    19. <!--[if lt IE 9]>
    20. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    21. <![endif]-->
    22. <style>
    23.     body {
    24.         margin: 0;
    25.     }
    26. </style>
    28. <body>
    29.     <canvas id="myCanvas" width="200" height="100">
    30.         <p>如果浏览器支持Canvas，它将忽略canvas内部的HTML，如果浏览器不支持Canvas，它将显示canvas内部的HTML</p>
    31.     </canvas>
    32. </body>
    33. <script>
    34.     var canva = document.getElementById("myCanvas");
    35.     if (canva.getContext) {
    36.         console.log('你的浏览器支持Canvas!');
    37.         var ctx = canva.getContext("2d");
    38.         ctx.fillStyle = "#dddddd";
    39.         ctx.fillRect(10, 10, 150, 150);
    41.         ctx.shadowOffsetX = 2;
    42.         ctx.shadowOffsetY = 2;
    43.         ctx.shadowBlur = 2;
    44.         ctx.shadowColor = '#666666';
    45.         ctx.font = '24px Arial';
    46.         ctx.fillStyle = '#333333';
    47.         ctx.fillText('带阴影的文字', 20, 40);
    49.     } else {
    50.         console.log('你的浏览器不支持Canvas!');
    51.     }
    52.     var k;
    53.     console.log(k)
    54. </script>
    56. </html>