2023-12-11 canvas(绘制方形，绘制线条)绘制一个正方形 1.获取画布 2.获取画笔 3.绘制注:一定不

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="300"></canvas>
    <script>
      let canvas = document.querySelector("#canvas");
      let context = canvas.getContext("2d");
      context.fillRect(100, 100, 200, 200);
      // 绘制一个正方形
    </script>
  </body>
</html>

绘制一个正方形 1.获取画布 2.获取画笔 3.绘制

注:一定不能通过样式的方式给canvas宽高，会有问题。必须使用属性的方式给canvas宽高

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script>
      let canvas = document.querySelector("#canvas");
      let context = canvas.getContext("2d");
      // 设置起点
      context.moveTo(100, 100);
      // 设置终点
      context.lineTo(200, 200);
      // 调用画线的方法
      context.stroke();
    </script>
  </body>
</html>

绘制线

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script>
      let canvas = document.querySelector("#canvas");
      let context = canvas.getContext("2d");
      // 设置起点
      context.moveTo(100, 100);
      // 设置终点
      context.lineTo(200, 200);
      context.lineTo(300, 300);
      context.lineTo(150, 200);
      context.lineTo(50, 50);
      // 调用画线的方法
      context.stroke();
    </script>
  </body>
</html>

连续绘制线

// 设置线粗细
   context.lineWidth = 20;
// 设置线条样式
   context.strokeStyle = "red";