Canvas 用多条斜线填充封闭路径区域

要使用多条斜线填充封闭路径区域，您可以使用<canvas>元素和JavaScript绘制斜线。以下是一个示例代码：

HTML部分：

<canvas id="myCanvas" width="400" height="400"></canvas>

JavaScript部分：

// 获取canvas元素和上下文
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 定义路径的起点和终点
var startX = 50;
var startY = 50;
var endX = 350;
var endY = 350;

// 定义斜线的间隔和角度
var spacing = 20;
var angle = 45;

// 计算斜线的长度和水平/垂直分量
var length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
var horizontal = spacing * Math.cos(angle * Math.PI / 180);
var vertical = spacing * Math.sin(angle * Math.PI / 180);

// 绘制斜线
ctx.beginPath();
for (var i = 0; i <= length; i += spacing) {
  ctx.moveTo(startX + i * (endX - startX) / length, startY + i * (endY - startY) / length);
  ctx.lineTo(startX + i * (endX - startX) / length + horizontal, startY + i * (endY - startY) / length + vertical);
}
ctx.stroke();

这段代码将在指定的canvas上绘制一条从(50, 50)到(350, 350)的斜线，斜线的间隔为20像素，角度为45度。您可以根据需要调整起点、终点、间隔和角度来绘制不同的斜线填充效果