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

    1.颜色

    1.1 概述

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

    1.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>颜色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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    1.3 运行显示

    在这里插入图片描述

    2.透明度

    2.1 概述

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

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

    2.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>透明度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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    2.3 运行显示

    在这里插入图片描述

    3.线的样式

    3.1 概述

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

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

    3.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>线的样式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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105

    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 代码示例

    
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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    4.3 运行显示

    在这里插入图片描述

    5.圆形渐变

    5.1 概述

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

    5.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>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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65

    5.3 运行显示

    在这里插入图片描述

  • 相关阅读:
    HBuilderX连接安卓模拟器
    JVS低代码表单自定义按钮的使用说明和操作示例
    【VRP问题】基于蚁群算法求解配送路径最短问题附matlab代码
    centos6服务器升级glibc失败后操作系统命令不能执行处理
    软件测试——从0开始的ios自动化测试(一)
    Vue 路由 ElementUI组件库
    DIY 万利 ST-LINK II 更改成 ST-Link V2
    找出链表中间结点的三种解法
    A-Level物理例题解析及练习Phase Difference
    【Spring（六）】使用篇：AOP在开发中的使用
  • 原文地址：https://blog.csdn.net/ZY_FlyWay/article/details/126612159