Javascript 如何将fillStyle添加到Path2D？JS帆布

从提出此问题之日起，这可能是不可能的，但是

Path2D（）

函数内部是否可以有

fillStyle

？ 例子： 路径2D（'M10 10 h10 v15 h-18 Z#ff00ff'）

我知道我可以添加

ctx.fillStyle=color之前

我可能会忽略前几个人，他们说我不能只是为了看看谁会给出答案，除非给出正确的解释。
这确实是不可能的，而且有几个原因

Path2D仅表示子路径，因此，它只是向量，不包含其他信息

填充和/或冲程是一个完全独立的操作，在不同的时刻进行，通常甚至在不同的硬件上进行，而不是在子路径构造（GPU vs CPU）上进行

实际上，
fillStyle
和
strokeStyle
确实表示无限大的曲面，这些曲面只会被当前子路径剪裁。

这些曲面甚至自行响应矩阵变换，这允许我们使用一个变换矩阵声明子路径，使用另一个矩阵填充，并使用第三个矩阵笔划：


const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
ctx.fillStyle=makePattern（“红色”）；
ctx.strokeStyle=makePattern（“绿色”）；
设角度=Math.PI/2；
ctx.线宽=10；
//我们用法线变换定义路径
ctx.rect（50,50,100,100）；
动漫（）；
函数anim（）{
清除（）；
//现在我们玩变换
常数cos=数学cos（角度）；
常数sin=数学sin（角度）；
setTransform（cos，sin，-sin，cos，125125）；
ctx.translate（-25，-25）；
ctx.fill（）；
ctx.刻度（cos*5，cos*5）；
ctx.stroke（）；
角度+=Math.PI/360；
请求动画帧（anim）；
}
//JU制作一个棋盘，每个矩形为5x5px
函数makePattern（颜色）{
const ctx=Object.assign（canvas.cloneNode（），{width:10，height:10}）
.getContext（'2d'）；
ctx.fillStyle=颜色；
ctx.rect（0,0,5,5）；
ctx.rect（5,5,5,5）；
ctx.fill（）；
返回ctx.createPattern（ctx.canvas，“repeat”）；
}
函数clear（）{
setTransform（1,0,0,1,0,0）；
ctx.clearRect（0,0，canvas.width，canvas.height）；
}
这确实是不可能的，原因有几个

Path2D仅表示子路径，因此，它只是向量，不包含其他信息

填充和/或冲程是一个完全独立的操作，在不同的时刻进行，通常甚至在不同的硬件上进行，而不是在子路径构造（GPU vs CPU）上进行

实际上，
fillStyle
和
strokeStyle
确实表示无限大的曲面，这些曲面只会被当前子路径剪裁。

这些曲面甚至自行响应矩阵变换，这允许我们使用一个变换矩阵声明子路径，使用另一个矩阵填充，并使用第三个矩阵笔划：


const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
ctx.fillStyle=makePattern（“红色”）；
ctx.strokeStyle=makePattern（“绿色”）；
设角度=Math.PI/2；
ctx.线宽=10；
//我们用法线变换定义路径
ctx.rect（50,50,100,100）；
动漫（）；
函数anim（）{
清除（）；
//现在我们玩变换
常数cos=数学cos（角度）；
常数sin=数学sin（角度）；
setTransform（cos，sin，-sin，cos，125125）；
ctx.translate（-25，-25）；
ctx.fill（）；
ctx.刻度（cos*5，cos*5）；
ctx.stroke（）；
角度+=Math.PI/360；
请求动画帧（anim）；
}
//JU制作一个棋盘，每个矩形为5x5px
函数makePattern（颜色）{
const ctx=Object.assign（canvas.cloneNode（），{width:10，height:10}）
.getContext（'2d'）；
ctx.fillStyle=颜色；
ctx.rect（0,0,5,5）；
ctx.rect（5,5,5,5）；
ctx.fill（）；
返回ctx.createPattern（ctx.canvas，“repeat”）；
}
函数clear（）{
setTransform（1,0,0,1,0,0）；
ctx.clearRect（0,0，canvas.width，canvas.height）；
}