zoukankan      html  css  js  c++  java
  • 02-canvas注意点

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>02-Canvas注意点</title>
     6     <style>
     7         *{
     8             margin: 0;
     9             padding: 0;
    10         }
    11         canvas{
    12             background: red;
    13             width: 500px;
    14             height: 500px;
    15         }
    16     </style>
    17 </head>
    18 <body>
    19 <!--1.创建一个画布-->
    20 <canvas  width="300" height="200"></canvas>
    21 <script>
    22     /*
    23     1.canvas有默认的宽度和高度
    24     默认宽300px, 高150px
    25     */
    26     /*
    27     2.不能通过CSS设置画布的宽高
    28     通过CSS设置画布宽高会在默认宽高的基础上拉伸
    29     如果需要设置canvas宽高请通过元素行内属性width和height设置
    30     */
    31     /*
    32     3.线条默认宽度和颜色
    33     通过canvas绘制的线条默认宽度是1px, 颜色是纯黑色
    34     但是由于默认情况下canvas会将线条的中心点和像素的底部对齐,
    35     所以会导致显示效果是2px和非纯黑色问题
    36     * */
    37 
    38     // 2.拿到画布
    39     let oCanvas = document.querySelector("canvas");
    40     // 3.拿到绘制工具
    41     let oCtx = oCanvas.getContext("2d");
    42     // 4.利用绘制工具绘制直线
    43     // 4.1设置起始位置
    44     oCtx.moveTo(50, 50.5);
    45     // 4.2设置路径上的点
    46     oCtx.lineTo(200, 50.5);
    47     // 4.2绘制已定义的路径
    48     oCtx.stroke();
    49 </script>
    50 </body>
    51 </html>
  • 相关阅读:
    LeetCode | Divide Two Integers
    LeetCode | Pow(x, n)
    LeetCode | Sqrt (x)
    LeetCode | 3 Sum
    LeetCode | Two Sum
    LeetCode | Pascal's Triangle II
    nodejs eclipse
    CentOS: Make Command not Found and linux xinetd 服务不能启动
    jquery将form表单序列化常json
    VMware Mac OS补丁安装
  • 原文地址:https://www.cnblogs.com/gsq1998/p/12166023.html
Copyright © 2011-2022 走看看