canvas在不规则多边形内绘制网格线填充样式

冬至z

于 2024-08-30 11:04:59 发布

阅读量459

点赞数 5

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

本文链接：https://blog.csdn.net/zkx529/article/details/141710044

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

最近接到了一个奇异的需求，要在canvas中在不规则多边形中绘制网格线做效果展示，效果如下：

介绍

需要在canvas中绘制途中的白色网格线，黄色区域为物体轮廓，要在轮廓内填充网格线做效果展示。

实现

较为简单的实现(目前已完成)有两种方案：

1. 使用createPattern方法在canvas内填充网格线

技术方案

1. 创建一个新的 <canvas> 元素用于绘制网格图案。
2. 在新 <canvas> 中绘制网格。
3. 将绘制好的网格图案作为填充样式。
4. 绘制多边形并使用网格图案填充。

代码实现

    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 创建一个用于绘制网格图案的小型canvas
    const patternCanvas = document.createElement('canvas');
    patternCanvas.width = 20; // 网格单元格大小
    patternCanvas.height = 20;

    const patternCtx = patternCanvas.getContext('2d');

    // 设置网格颜色
    patternCtx.strokeStyle = '#333';

    // 绘制网格
    for (let i = 0; i <= patternCanvas.width; i += 20) {
      patternCtx.beginPath();
      patternCtx.moveTo(i, 0);
      patternCtx.lineTo(i, patternCanvas.height);
      patternCtx.stroke();

      patternCtx.beginPath();
      patternCtx.moveTo(0, i);
      patternCtx.lineTo(patternCanvas.width, i);
      patternCtx.stroke();
    }

    // 创建模式填充
    const pattern = ctx.createPattern(patternCanvas, 'repeat');

    // 定义多边形的顶点
    const points = [
      { x: 100, y: 100 },
      { x: 150, y: 200 },
      { x: 250, y: 250 },
      { x: 300, y: 150 },
      { x: 250, y: 50 }
    ];

    // 绘制多边形
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    for (let i = 1; i < points.length; i++) {
      ctx.lineTo(points[i].x, points[i].y);
    }
    ctx.closePath(); // 关闭路径

    // 使用网格图案填充多边形
    ctx.fillStyle = pattern;
    ctx.fill();

2. 使用clip方法将网格线绘制在不规则多边形内

技术方案

clip方法可以使用多边形的路径裁剪网格来让网格线绘制在多边形内(网格线多画一些超出多边形，然后通过clip方法让网格线都绘制在多边形内)

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Clip and Grid Example</title>
<style>
  canvas {
    display: block;
    margin: 0 auto;
    background-color: #f0f0f0;
  }
</style>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 定义不规则多边形的顶点
    const points = [
      { x: 100, y: 100 },
      { x: 150, y: 150 },
      { x: 200, y: 200 },
      { x: 250, y: 150 },
      { x: 300, y: 200 },
      { x: 250, y: 250 },
      { x: 200, y: 200 },
      { x: 150, y: 250 }
    ];

    // 开始绘制多边形
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    for (let i = 1; i < points.length; i++) {
      ctx.lineTo(points[i].x, points[i].y);
    }
    ctx.closePath(); // 关闭路径
    ctx.stroke()

    // 设置剪切区域
    ctx.clip();

    // 绘制网格线
    const gridStep = 10;
    const gridColor = '#fff';
    const gridLineWidth = 1;

    ctx.strokeStyle = gridColor;
    ctx.lineWidth = gridLineWidth;

    // 水平网格线
    for (let y = 0; y < canvas.height; y += gridStep) {
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(canvas.width, y);
      ctx.stroke();
    }

    // 垂直网格线
    for (let x = 0; x < canvas.width; x += gridStep) {
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, canvas.height);
      ctx.stroke();
    }
    // ctx.restore()
  </script>
</body>
</html>

效果展示(方案2)

其他方案

1. 使用svg盖在canvas上方，实现复杂

2. 使用图片盖在canvas上方然后使用clip裁剪

这些方案都实现复杂许多，只为提供更多思路

渐变色

canvas的渐变色也有很好的展示效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Gradient Example</title>
<style>
  canvas {
    display: block;
    margin: 0 auto;
    background-color: #f0f0f0;
  }
</style>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 线性渐变
    const linearGradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
    linearGradient.addColorStop(0, 'red');
    linearGradient.addColorStop(0.5, 'yellow');
    linearGradient.addColorStop(1, 'green');
    ctx.fillStyle = linearGradient;
    ctx.fillRect(10, 10, 100, 100);

    // 径向渐变
    const radialGradient = ctx.createRadialGradient(
      canvas.width / 2, canvas.height / 2, 0,
      canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) / 2
    );
    radialGradient.addColorStop(0, 'blue');
    radialGradient.addColorStop(0.5, 'white');
    radialGradient.addColorStop(1, 'black');
    ctx.fillStyle = radialGradient;
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) / 2, 0, Math.PI * 2);
    ctx.fill();
  </script>