canvas 系列学习笔记三《样式和颜色》

星宇大前端

发布于 2022-09-28 04:46:38

60200

代码可运行

文章被收录于专栏：大宇笔记大宇笔记

运行总次数：0

代码可运行

1.颜色

1.1 概述

通过上下文可以设置strokeStyle (线条颜色) 和 fillStyle （填充颜色）。设置完之后画线和填充就是设置的颜色。

1.2 代码示例

<!--
 * @Author: ZY
 * @Date: 2022-07-12 17:28:37
 * @LastEditors: ZY
 * @LastEditTime: 2022-07-14 15:16:48
 * @FilePath: /canvas-case/03-样式和颜色/01-颜色.html
 * @Description: 颜色
-->
<!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>颜色</title>
  </head>
  <body>
    <canvas id="canvas2d" width="200" height="200"></canvas>
  </body>
  <style>
    #canvas2d {
      border: 1px solid;
      display: block;
      margin: 0 auto;
    }
  </style>

  <script>
    let canvas2d = document.getElementById("canvas2d");
    if (canvas2d.getContext) {
      var ctx = canvas2d.getContext("2d");      
      ctx.strokeStyle = 'red'
      ctx.strokeRect(0,0,20,20)
      ctx.fillRect(20,0,20,20)
      ctx.fillStyle = 'rgba(255,0,0,1)'
      ctx.fillRect(40,0,20,20)
    }
  </script>
</html>

1.3 运行显示

2.透明度

2.1 概述

透明度主要通过两种方式改变：

通过添加strokeStyle 和 fillStyle 设置 rgba 颜色改变透明度
可以更改context 的 globalAlpha 属性更改

2.2 代码示例

<!--
 * @Author: ZY
 * @Date: 2022-07-13 09:04:48
 * @LastEditors: ZY
 * @LastEditTime: 2022-07-13 09:53:09
 * @FilePath: /canvas-case/03-样式和颜色/02-透明度.html
 * @Description: 透明度
-->
<!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>透明度</title>
  </head>
  <body>
    <canvas id="canvas2d" width="500" height="500"></canvas>

  </body>
  <style>
    #canvas2d {
      border: 1px solid;
      display: block;
      margin: 0 auto;
    }
  </style>

  <script>
    let canvas2d = document.getElementById("canvas2d");
    if (canvas2d.getContext) {
      var ctx = canvas2d.getContext("2d");      
      for (let index = 0; index <10; index++) {
        ctx.strokeStyle = 'blue'
        ctx.globalAlpha = 0.03 * index
        ctx.arc(100, 100, 10 * index, 0, 2 * Math.PI);
        ctx.stroke()
      }
      ctx.moveTo(300, 300)
      ctx.beginPath()

      for (let i = 0; i <10; i++) {
        ctx.strokeStyle = 'rgba(0,0,255,0.03 * i)'
        ctx.arc(300, 300, 10 * i, 0, 2 * Math.PI);
        ctx.stroke()
      }
    }
  </script>
</html>

2.3 运行显示

3.线的样式

3.1 概述

线的样式主要有四个配置属性注意点：

线的宽度 lineWidth
设置线条末端样式 lineCap, ( butt 线段末端以方形结束；round：线段末端以圆形结束；square 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域）
设定线条与线条间接合处的样式 lineJoin (round: 圆形连接点；bevel：在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。miter：通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果)
虚线

3.2 代码示例

<!--
 * @Author: ZY
 * @Date: 2022-07-13 09:55:24
 * @LastEditors: ZY
 * @LastEditTime: 2022-07-14 17:27:58
 * @FilePath: /canvas-case/03-样式和颜色/03-线的样式.html
 * @Description: 线的样式
-->
<!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>线的样式</title>
  </head>
  <body>
    <canvas id="canvas2d" width="500" height="500"></canvas>
  </body>
  <style>
    #canvas2d {
      border: 1px solid;
      display: block;
      margin: 0 auto;
    }
  </style>

  <script>
    let canvas2d = document.getElementById("canvas2d");
    if (canvas2d.getContext) {
      var ctx = canvas2d.getContext("2d");

      // lineWidth
      for (var i = 0; i < 10; i++) {
        ctx.lineWidth = 1 + i;
        ctx.beginPath();
        ctx.moveTo(5 + i * 14, 5);
        ctx.lineTo(5 + i * 14, 140);
        ctx.stroke();
      }

      // lineCap :  butt，round 和 square
      // 创建路径
      ctx.lineWidth = 1;
      ctx.strokeStyle = "#09f";
      ctx.beginPath();
      ctx.moveTo(150, 10);
      ctx.lineTo(290, 10);
      ctx.moveTo(150, 140);
      ctx.lineTo(290, 140);
      ctx.stroke();

      // 画线条
      var lineCap = ["butt", "round", "square"];
      ctx.strokeStyle = "black";
      for (var i = 0; i < lineCap.length; i++) {
        ctx.lineWidth = 15;
        ctx.lineCap = lineCap[i];
        ctx.beginPath();
        ctx.moveTo(170 + i * 50, 10);
        ctx.lineTo(170 + i * 50, 140);
        ctx.stroke();
      }

      // lineJoin: round, bevel 和 miter。
      var lineJoin = ["round", "bevel", "miter"];
      ctx.lineWidth = 10;
      ctx.translate(310, 10);
      for (var i = 0; i < lineJoin.length; i++) {
        ctx.lineJoin = lineJoin[i];
        ctx.beginPath();
        ctx.moveTo(-5, 5 + i * 40);
        ctx.lineTo(35, 45 + i * 40);
        ctx.lineTo(75, 5 + i * 40);
        ctx.lineTo(115, 45 + i * 40);
        ctx.lineTo(155, 5 + i * 40);
        ctx.stroke();
      }

      // 虚线
      var offset = 0;
      ctx.translate(-300, 140);
      ctx.lineWidth = 2

      function draw() {
        ctx.clearRect(0, 0, canvas2d.width, canvas2d.height);
        ctx.setLineDash([8, 10]);
        ctx.lineDashOffset = -offset;
        ctx.strokeRect(10, 10, 100, 100);
      }

      function march() {
        offset++;
        if (offset > 16) {
          offset = 0;
        }
        draw();
        setTimeout(march, 20);
      }

      march();
    }
  </script>
</html>

3.3 运行显示

4.线性渐变

4.1 概述

就好像一般的绘图软件一样，我们可以用线性或者径向的渐变来填充或描边。我们用下面的方法新建一个 canvasGradient 对象，并且赋给图形的 fillStyle 或 strokeStyle 属性。

createLinearGradient(x1, y1, x2, y2) createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

gradient.addColorStop(position, color) addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF，rgba(0,0,0,1)，等等）。

主要思路设置变色范围和颜色范围值

4.2 代码示例

<!--
 * @Author: ZY
 * @Date: 2022-07-12 17:28:37
 * @LastEditors: ZY
 * @LastEditTime: 2022-07-18 16:34:59
 * @FilePath: /canvas-case/03-样式和颜色/04-渐变.html
 * @Description: 颜色
-->
<!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>颜色</title>
  </head>
  <body>
    <canvas id="canvas2d" width="200" height="200"></canvas>
  </body>
  <style>
    #canvas2d {
      border: 1px solid;
      display: block;
      margin: 0 auto;
    }
  </style>

  <script>
    let canvas2d = document.getElementById("canvas2d");
    if (canvas2d.getContext) {
      var ctx = canvas2d.getContext("2d");
      var lingrad = ctx.createLinearGradient(0, 0, 100, 0);
      lingrad.addColorStop(0, "red");
      lingrad.addColorStop(1, "green");

      ctx.strokeStyle = lingrad;
      ctx.fillStyle = lingrad;

      ctx.lineWidth = 10;
      ctx.moveTo(0, 10);
      ctx.lineTo(150, 10);
      ctx.stroke();

      
      ctx.fillRect(25, 25, 50, 50);
      ctx.strokeRect(25, 125, 50, 50);


    }
  </script>
</html>

4.3 运行显示

5.圆形渐变

5.1 概述

其他和线性渐变一样，只是createLinearGradient 换成圆形 createRadialGradient

5.2 代码示例

<!--
 * @Author: ZY
 * @Date: 2022-07-12 17:28:37
 * @LastEditors: ZY
 * @LastEditTime: 2022-07-19 17:00:15
 * @FilePath: /canvas-case/03-样式和颜色/05-圆形渐变.html
 * @Description: 05-圆形渐变
-->
<!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>05-圆形渐变</title>
  </head>
  <body>
    <canvas id="canvas2d" width="200" height="200"></canvas>
  </body>
  <style>
    #canvas2d {
      border: 1px solid;
      display: block;
      margin: 0 auto;
    }
  </style>

  <script>
    let canvas2d = document.getElementById("canvas2d");
    if (canvas2d.getContext) {
      var ctx = canvas2d.getContext("2d");
      // 创建渐变
      var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
      radgrad.addColorStop(0, "#A7D30C");
      radgrad.addColorStop(0.9, "#019F62");
      radgrad.addColorStop(1, "rgba(1,159,98,0)");

      var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
      radgrad2.addColorStop(0, "#FF5F98");
      radgrad2.addColorStop(0.75, "#FF0188");
      radgrad2.addColorStop(1, "rgba(255,1,136,0)");

      var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
      radgrad3.addColorStop(0, "#00C9FF");
      radgrad3.addColorStop(0.8, "#00B5E2");
      radgrad3.addColorStop(1, "rgba(0,201,255,0)");

      var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
      radgrad4.addColorStop(0, "#F4F201");
      radgrad4.addColorStop(0.8, "#E4C700");
      radgrad4.addColorStop(1, "rgba(228,199,0,0)");

      // 画图形
      ctx.fillStyle = radgrad4;
      ctx.fillRect(0, 0, 150, 150);
      ctx.fillStyle = radgrad3;
      ctx.fillRect(0, 0, 150, 150);
      ctx.fillStyle = radgrad2;
      ctx.fillRect(0, 0, 150, 150);
      ctx.fillStyle = radgrad;
      ctx.fillRect(0, 0, 150, 150);
    }
  </script>
</html>