canvas_4_样式与颜色

最新推荐文章于 2024-07-25 09:24:40 发布

熙哥_tito

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量33

点赞数

分类专栏： canvas 文章标签：前端

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/weixin_49471755/article/details/131004702

版权

canvas 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

内容都在代码中！！

<!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>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<!-- 

  ctx.fillRect(x,y,width,height)   :绘制一个填充矩形

  ctx.fillStyle = color   填充颜色

  ctx.strokeStyle = color   轮廓颜色

  globalAlpha = transparencyValue   0 ~ 1 之间     globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为使用rgba()设置透明度更加好一些。

  ctx.lineWidth = ""    线宽

  ctx.lineCap   末端样式   butt：以方形结束   round：线段末端以圆形结束   square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
  
  ctx.lineJoin    同一个 path 内，设定线条与线条间接合处的样式。
                  round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。

                  bevel 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。

                  miter(默认) 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。

  ctx.setLineDash([实线长度, 虚线长度]) 与 ctx.lineDashOffset = ""   制定虚线样式
                                                  setLineDash([实线长度, 虚线长度])   方法接受一个数组，来指定线段与间隙的交替
                                                  lineDashOffset    属性设置起始偏移量。
  
 -->

<body>
  <canvas id="can1" width="300" height="300"></canvas>
  <script>
    (() => {
      let canvas = document.getElementById("can1")
      let ctx = canvas.getContext("2d")
      for (let i = 0; i < 6; i++) {
        for (let j = 0; j < 6; j++) {
          ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
            Math.floor(255 - 42.5 * j) + ',0)';
          ctx.fillRect(j * 50, i * 50, 50, 50);
        }
      }
    })()
  </script>

  <canvas id="can2" width="300" height="300"></canvas>
  <script>
      (() => {
        let canvas = document.getElementById("can2")
        let ctx = canvas.getContext("2d")
        for (let i = 0; i < 6; i++) {
          for (let j = 0; j < 6; j++) {
            ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
            ctx.strokeRect(j * 50, i * 50, 40, 40);
          }
        }
      })()
    /**
   返回随机的 [from, to] 之间的整数(包括from，也包括to)
   */
    function randomInt(from, to) {
      return parseInt(Math.random() * (to - from + 1) + from);
    }
  </script>

  <div>
    <canvas id="can3" width="300" height="300"></canvas>
    <canvas id="can4" width="300" height="300"></canvas>
    <canvas id="can5" width="300" height="300"></canvas>
    <script>
      (() => {
        let canvas = document.getElementById("can3")
        let ctx = canvas.getContext("2d")
        let lineCaps = ["butt", "round", "square"];

        for (let i = 0; i < 3; i++) {
          ctx.beginPath();
          ctx.moveTo(20 + 30 * i, 30);
          ctx.lineTo(20 + 30 * i, 100);
          ctx.lineWidth = 20;
          ctx.lineCap = lineCaps[i];
          ctx.stroke();
        }

        ctx.beginPath();
        ctx.moveTo(0, 30);
        ctx.lineTo(300, 30);

        ctx.moveTo(0, 100);
        ctx.lineTo(300, 100)

        ctx.strokeStyle = "red";
        ctx.lineWidth = 1;
        ctx.stroke();
      })();

      (() => {
        let canvas = document.getElementById("can4")
        let ctx = canvas.getContext("2d")

        let lineJoin = ['round', 'bevel', 'miter'];
        ctx.lineWidth = 20;

        for (let i = 0; i < lineJoin.length; i++) {
          ctx.lineJoin = lineJoin[i];
          ctx.beginPath();
          ctx.moveTo(50, 50 + i * 50);
          ctx.lineTo(100, 100 + i * 50);
          ctx.lineTo(150, 50 + i * 50);
          ctx.lineTo(200, 100 + i * 50);
          ctx.lineTo(250, 50 + i * 50);
          ctx.stroke();
        }
      })();

      (() => {
        let canvas = document.getElementById("can5")
        let ctx = canvas.getContext("2d")
        ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
        ctx.lineDashOffset = 0;
        ctx.strokeRect(50, 50, 210, 210);
      })()
    </script>
  </div>
</body>

</html>