2023-12-13 (绘制渐变折线，绘制圆弧，绘制椭圆弧，绘制笑脸，图形填充样式)

张志明456
59 阅读2分钟

绘制渐变折线

<!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(10, 10);
      context.lineTo(110, 110);
      context.lineTo(210, 10);
      context.lineTo(310, 110);
      context.lineTo(410, 10);
      context.lineWidth = 10;

      // 添加渐变
      // 设置渐变起点和终点
      let gradient = context.createLinearGradient(10, 10, 410, 10);
      gradient.addColorStop(0, "red");
      gradient.addColorStop(1, "blue");
      context.strokeStyle = gradient;

      context.stroke();
    </script>
  </body>
</html>

image.png

image.png

<!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.arc(200, 200, 50, (0 * Math.PI) / 180, (180 * Math.PI) / 180, true);
      // 参数: x,y,R,起始弧度,终点弧度,正向或负向
      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="600" height="600"></canvas>
    <script>
      let canvas = document.querySelector("#canvas");
      let context = canvas.getContext("2d");
      // 头
      context.arc(
        300,
        300,
        300,
        (0 * Math.PI) / 180,
        (360 * Math.PI) / 180,
        true
      );
      context.stroke();

      // 在两个不相关的图形之间，需要告诉context，重新生成一个新的路径
      // 开始路径
      // 鼻子
      context.beginPath();
      context.arc(
        300,
        300,
        20,
        (0 * Math.PI) / 180,
        (360 * Math.PI) / 180,
        true
      );
      context.stroke();
      context.closePath();
      // 闭合路径

      // 左眼
      context.beginPath();
      context.arc(
        150,
        150,
        20,
        (0 * Math.PI) / 180,
        (360 * Math.PI) / 180,
        true
      );
      context.stroke();
      context.closePath();

      // 右眼
      context.beginPath();
      context.arc(
        450,
        150,
        20,
        (0 * Math.PI) / 180,
        (360 * Math.PI) / 180,
        true
      );
      context.stroke();
      context.closePath();

      // 嘴巴
      context.beginPath();
      context.arc(
        300,
        300,
        250,
        (0 * Math.PI) / 180,
        (180 * Math.PI) / 180,
        false
      );
      context.stroke();
      context.closePath();
    </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.ellipse(200, 200, 200, 100, 0, -(90 * Math.PI) / 180, (90 * Math.PI) / 180);
      // 参数: x,y,x半径,y半径,顺时针旋转度数,起始弧度,终点弧度
      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="600" height="600"></canvas>
    <script>
      let canvas = document.querySelector("#canvas");
      let context = canvas.getContext("2d");
      // 头
      context.arc(
        300,
        300,
        300,
        (0 * Math.PI) / 180,
        (360 * Math.PI) / 180,
        true
      );
      context.stroke();

      // 在两个不相关的图形之间，需要告诉context，重新生成一个新的路径
      // 开始路径
      // 鼻子
      context.beginPath();
      context.ellipse(
        300,
        300,
        50,
        100,
        0,
        (0 * Math.PI) / 180,
        (360 * Math.PI) / 180
      );
      context.stroke();
      context.closePath();
      // 闭合路径

      // 左眼
      context.beginPath();
      context.arc(
        150,
        150,
        20,
        (0 * Math.PI) / 180,
        (360 * Math.PI) / 180,
        true
      );
      context.stroke();
      context.closePath();

      // 右眼
      context.beginPath();
      context.arc(
        450,
        150,
        20,
        (0 * Math.PI) / 180,
        (360 * Math.PI) / 180,
        true
      );
      context.stroke();
      context.closePath();

      // 嘴巴
      context.beginPath();
      context.arc(
        300,
        300,
        250,
        (0 * Math.PI) / 180,
        (180 * Math.PI) / 180,
        false
      );
      context.stroke();
      context.closePath();
    </script>
  </body>
</html>

绘制椭圆鼻子笑脸

image.png

context.fill()填充颜色 fill会自动连接起始点和终点

image.png

设置填充样式

<!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="600" height="600"></canvas>
    <script>
      let canvas = document.querySelector("#canvas");
      let context = canvas.getContext("2d");
      // 头
      context.arc(
        300,
        300,
        300,
        (0 * Math.PI) / 180,
        (360 * Math.PI) / 180,
        true
      );
      // 从(0,0)向(600,600)渐变
      let gradient = context.createLinearGradient(0, 0, 600, 600);
      gradient.addColorStop(0, "red");
      gradient.addColorStop(1, "blue");
      context.fillStyle = gradient;
      context.fill();
      context.stroke();

      // 在两个不相关的图形之间，需要告诉context，重新生成一个新的路径
      // 开始路径
      // 鼻子
      context.beginPath();
      context.ellipse(
        300,
        300,
        50,
        100,
        0,
        (0 * Math.PI) / 180,
        (360 * Math.PI) / 180
      );
      context.stroke();
      context.closePath();
      // 闭合路径

      // 左眼
      context.beginPath();
      context.arc(
        150,
        150,
        20,
        (0 * Math.PI) / 180,
        (360 * Math.PI) / 180,
        true
      );
      context.stroke();
      context.closePath();

      // 右眼
      context.beginPath();
      context.arc(
        450,
        150,
        20,
        (0 * Math.PI) / 180,
        (360 * Math.PI) / 180,
        true
      );
      context.stroke();
      context.closePath();

      // 嘴巴
      context.beginPath();
      context.arc(
        300,
        300,
        250,
        (0 * Math.PI) / 180,
        (180 * Math.PI) / 180,
        false
      );

      context.stroke();
      context.closePath();
    </script>
  </body>
</html>

笑脸填充线性渐变色

image.png

填充径向渐变色

avatar
文章
阅读
粉丝