zoukankan      html  css  js  c++  java
  • 13-绘制矩形的简写方式

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>13-Canvas绘制矩形</title>
     6     <style>
     7         *{
     8             margin: 0;
     9             padding: 0;
    10         }
    11         canvas{
    12             display: block;
    13             margin: 0 auto;
    14             background: red;
    15         }
    16     </style>
    17 </head>
    18 <body>
    19 <canvas width="300" height="300"></canvas>
    20 <script>
    21     // 1.拿到canvas
    22     let oCanvas = document.querySelector("canvas");
    23     // 2.从canvas中拿到绘图工具
    24     let oCtx = oCanvas.getContext("2d");
    25     /*
    26     oCtx.moveTo(100, 100);
    27     oCtx.lineTo(300, 100);
    28     oCtx.lineTo(300, 300);
    29     oCtx.lineTo(100, 300);
    30     oCtx.closePath();
    31     // oCtx.stroke();
    32     oCtx.fill();
    33     */
    34     /*
    35     oCtx.moveTo(100, 100);
    36     oCtx.lineTo(300, 100);
    37     oCtx.lineWidth = 200;
    38     oCtx.stroke();
    39     */
    40     /*
    41     第一个参数: x的坐标
    42     第二个参数: y的坐标
    43     第三个参数: 矩形的宽度
    44     第四个参数: 矩形的高度
    45     * */
    46  
    47     // oCtx.rect(100, 100, 200, 200);
    48     // oCtx.stroke();
    49     // oCtx.fill();
    50 
    51     // oCtx.beginPath();
    52     // oCtx.rect(150, 150, 100, 100);
    53     // oCtx.strokeStyle = "blue";
    54     // oCtx.stroke();
    55 
    56     // 简写形式
    57     // oCtx.strokeRect(100, 100, 200, 200);
    58 
    59     // oCtx.strokeStyle = "blue";
    60     // oCtx.strokeRect(150, 150, 100, 100);
    61 
    62 
    63     // oCtx.fillRect(100, 100, 200, 200);
    64 
    65     // oCtx.fillStyle = "blue";
    66     // oCtx.fillRect(150, 150, 100, 100);
    67     // 清除某个矩形地区的东西
    68     // oCtx.clearRect(0, 0, 150, 150);
    69     // 清除整个画板
    70     let canvasWidth = oCtx.canvas.width;
    71     let canvasHeight = oCtx.canvas.height;
    72     oCtx.clearRect(0, 0, canvasWidth, canvasHeight);
    73 </script>
    74 </body>
    75 </html>
  • 相关阅读:
    bzoj 2120 数颜色 带修改莫队
    luogu 2709 小B的询问 莫队
    bzoj 2002 [Hnoi2010]Bounce 弹飞绵羊 分块
    bzoj 4765 普通计算姬 dfs序 + 分块
    loj 数列分块入门 6 9(区间众数)
    loj 数列分块入门 5 7 8
    AtCoder Grand Contest 021 D
    Codeforces Round #466
    office 威胁检测
    修改macos的启动LOGO
  • 原文地址:https://www.cnblogs.com/gsq1998/p/12166106.html
Copyright © 2011-2022 走看看