【canvas】canvas基础使用（四）：线型的设置

简言

学习如何使用canvas来设置线形。

线型的方法和属性

使用canvas经常会和线段打交道，下面是设置线型的常用属性和方法。

lineWidth 线宽

CanvasRenderingContext2D.lineWidth 是 Canvas 2D API 设置线段厚度的属性（即线段的宽度）。

线可以通过stroke(), strokeRect(), 和strokeText() 方法绘制。

语法：
ctx.lineWidth = value;
选项值：

value — 描述线段宽度的数字。0、负数、 Infinity 和 NaN 会被忽略。

示例

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

ctx.lineWidth = 15;

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(130, 130);
ctx.rect(40, 40, 70, 70);
ctx.stroke();

在这里插入图片描述

lineCap 线段末端样式

CanvasRenderingContext2D.lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有 3 个可能的值，分别是：butt, round and square。默认值是 butt。

字面意思线段末端样式

语法:
ctx.lineCap = “butt”;
ctx.lineCap = “round”;
ctx.lineCap = “square”;
选项值：

butt — 线段末端以方形结束。
round —线段末端以圆形结束。
square — 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

示例

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

// Draw guides
ctx.strokeStyle = "#09f";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = "black";
["butt", "round", "square"].forEach((lineCap, i) => {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap;
  ctx.beginPath();
  ctx.moveTo(25 + i * 50, 10);
  ctx.lineTo(25 + i * 50, 140);
  ctx.stroke();
});

在这里插入图片描述

lineJoin 线相连部分样式

CanvasRenderingContext2D.lineJoin 是 Canvas 2D API 用来设置 2 个长度不为 0 的相连部分（线段、圆弧、曲线）如何连接在一起的属性（长度为 0 的变形部分，其指定的末端和控制点在同一位置，会被忽略）。此属性有 3 个值： round, bevel and miter。默认值是 miter。

如果 2 个相连部分在同一方向，那么 lineJoin 不会产生任何效果，因为在那种情况下不会出现连接区域。

语法：
ctx.lineJoin = “bevel”;
ctx.lineJoin = “round”;
ctx.lineJoin = “miter”;
选项值：

round — 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。
bevel — 在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。
miter — 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。

示例

const ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 10;

["round", "bevel", "miter"].forEach((join, i) => {
  ctx.lineJoin = join;
  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();
});

在这里插入图片描述

miterLimit 斜接面限制比例

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

只有当 lineJoin 显示为 “>”(miter) 时，miterLimit 才有效。

语法：
ctx.miterLimit = value;
选项值：

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

示例

在这里插入图片描述

lineDashOffset 虚线偏移量

CanvasRenderingContext2D.lineDashOffset 是 Canvas 2D API 设置虚线偏移量的属性，例如可以实现“蚂蚁线“的效果。

有虚线设置才可体现偏移

语法：
ctx.lineDashOffset = value;
选项值：

value — 偏移量是 float 精度的数字。初始值为 0.0。

示例

在这里插入图片描述

setLineDash() 设置线段样式

Canvas 2D API 的CanvasRenderingContext2D接口的 setLineDash() 方法在填充线时使用虚线模式。它使用一组值来指定描述模式的线和间隙的交替长度。

如果要切换回至实线模式，将 dash list 设置为一个空数组即可。

语法：
setLineDash(segments);
参数：

segments — 一个Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

数组下标偶数位（0，2，4…）表示绘制，数组下标奇数位（1，3，5…）表示间距

示例

function drawDashedLine(pattern) {
  ctx.beginPath();
  ctx.setLineDash(pattern);
  ctx.moveTo(0, y);
  ctx.lineTo(300, y);
  ctx.stroke();
  y += 20;
}

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let y = 15;

drawDashedLine([]);
drawDashedLine([1, 1]);
drawDashedLine([10, 10]);
drawDashedLine([20, 5]);
drawDashedLine([15, 3, 3, 3]);
drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
drawDashedLine([12, 3, 3]); // Equals [12, 3, 3, 12, 3, 3]

在这里插入图片描述

getLineDash() 获取线段样式

CanvasRenderingContext2D.getLineDash() 是 Canvas 2D API 获取当前线段样式的方法。
语法：
ctx.getLineDash();
返回值：
一个 Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组元素会被复制并重复。例如，设置线段为 [5, 15, 25] 将会得到以下返回值 [5, 15, 25, 5, 15, 25]。

示例

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

ctx.setLineDash([10, 20]);
console.log(ctx.getLineDash()); // [10, 20]

// Draw a dashed line
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();