CanvasRenderingContext2D.miterLimit属性 | Canvas CanvasRenderingContext2D

返回到：Canvas API：CanvasRenderingContext2D

CanvasRenderingContext2D.miterLimit 是 Canvas 2D API 设置斜接面限制比例的属性。当获取属性值时，会返回当前的值（默认值是10.0 ）。当给属性赋值时，0、负数、 Infinity 和 NaN 都会被忽略；除此之外都会被赋予一个新值。

语法

ctx.miterLimit = value;

选项

value

斜接面限制比例的的数字。0、负数、Infinity 和 NaN 都会被忽略。

简释

ctx.lineJoin = "miter"  // "miter" >   "round" )   "bevel" ]

只有当 lineJoin 显示为 “>” 时，miterLimit 才有效。边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 ” ] ” 类型来显示

示例

使用 `miterLimit` 属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>使用样式和颜色 | Web176教程www.web176.com</title>
        <meta name="robots" content="noindex, nofollow">
        <style>
            body {
              padding: 0;
              margin: 0;
            }

            svg:not(:root) {
              display: block;
            }

            .playable-code {
              background-color: #f4f7f8;
              border: none;
              border-left: 6px solid #558abb;
              border-width: medium medium medium 6px;
              color: #4d4e53;
              height: 100px;
              width: 90%;
              padding: 10px 10px 0;
            }

            .playable-canvas {
              border: 1px solid #4d4e53;
              border-radius: 2px;
            }

            .playable-buttons {
              text-align: right;
              width: 90%;
              padding: 5px 10px 5px 26px;
            }
        </style>
        
        
    </head>
    <body>
        
            <table>
  <tr>
    <td><canvas id="canvas" width="150" height="150"></canvas></td>
    <td>在输入框中输入<code>miterLimit</code>的值，并点击重绘按钮查看效果。<br><br>
      <form onsubmit="return draw();">
        <label>Miter limit</label>
        <input type="number" size="3" id="miterLimit"/>
        <input type="submit" value="重绘"/>
      </form>
    </td>
  </tr>
</table>

        
        
            <script>
                function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // 清空画布
  ctx.clearRect(0, 0, 150, 150);

  // 绘制参考线
  ctx.strokeStyle = '#09f';
  ctx.lineWidth   = 2;
  ctx.strokeRect(-5, 50, 160, 50);

  // 设置线条样式
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 10;

  // 检查输入
  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
  } else {
    alert('Value must be a positive number');
  }

  // 绘制线条
  ctx.beginPath();
  ctx.moveTo(0, 100);
  for (i = 0; i < 24 ; i++) {
    var dy = i % 2 == 0 ? 25 : -25;
    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
  }
  ctx.stroke();
  return false;
}

document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
draw();

            </script>
        
    </body>
</html>

返回到：Canvas API：CanvasRenderingContext2D

作者：terry，如若转载，请注明出处：https://www.web176.com/canvas_api/7938.html

CanvasRenderingContext2D.miterLimit属性 | Canvas CanvasRenderingContext2D

语法

选项

简释

示例

使用 miterLimit 属性

相关推荐

发表回复

使用 `miterLimit` 属性