Javascript 画布-如何使用createLinearGradient（）用两种颜色填充正方形？

我在制作一个有两种颜色的正方形时遇到了问题。我找到了createLinearGradient和addColorStop函数，但它只使用一种颜色填充正方形，即蓝色

我该如何正确地填充这个正方形？我很难理解函数的参数

var c = canvas.getContext('2d'); // context object

var grad = c.createLinearGradient(0, 0, 0, 100);

grad.addColorStop(0, "red");     //
grad.addColorStop(1, "blue");   //

// Fill a square:
c.fillStyle = grad;
c.fillRect(100, 100, 100, 100);

---

createLinearGradient

的值不在正在绘制的矩形范围内

const canvas=document.getElementById（'one'）；
const c=canvas.getContext（'2d'）；
const grad=c.createLinearGradient（100100200200）；
渐变加色停止（0，“红色”）；
渐变加色停止（1，“蓝色”）；
c、 填充样式=渐变；
c、 fillRect（100100100100）
画布{
外形：1px纯黑
}
您的
createLinearGradient
值不在正在绘制的矩形范围内


const canvas=document.getElementById（'one'）；
const c=canvas.getContext（'2d'）；
const grad=c.createLinearGradient（100100200200）；
渐变加色停止（0，“红色”）；
渐变加色停止（1，“蓝色”）；
c、 填充样式=渐变；
c、 fillRect（100100100100）
画布{
外形：1px纯黑
}
填充样式（如渐变和图案）是相对于上下文矩阵绘制的，因此渐变实际上是在矩形上方绘制的：


var c=canvas.getContext（'2d'）；//上下文对象
var grad=c.createLinearGradient（0,0,0,100）；
渐变加色停止（0，“红色”）//
渐变加色停止（1，“蓝色”）//
c、 填充样式=渐变；
//显示整个渐变
c、 fillRect（0，0，canvas.width，canvas.height）；
//奥普广场
c、 strokeRect（100100100100）
填充样式（如渐变和图案）是相对于上下文矩阵绘制的，因此渐变实际上是在矩形上方绘制的：


var c=canvas.getContext（'2d'）；//上下文对象
var grad=c.createLinearGradient（0,0,0,100）；
渐变加色停止（0，“红色”）//
渐变加色停止（1，“蓝色”）//
c、 填充样式=渐变；
//显示整个渐变
c、 fillRect（0，0，canvas.width，canvas.height）；
//奥普广场
c、 strokeRect（100100100100）
更具体地说，
createLinearGradient
和
fillRect
中的坐标是相互独立的，因此如果渐变不发生在由
fillRect
定义的坐标内，它将根本不可见。哦，因此渐变必须与矩形的位置相匹配，如果我想让矩形保持在100100，那么梯度必须在哪里覆盖它？100100的矩形是没有大小的矩形！！0,0100100处的矩形是宽度为100、高度为100的矩形。@Intervalia no A矩形100100是一个100px正方形，其左上角位于100100坐标处。rect的参数是x，y，width，heightAh，我忘了它是宽度和高度，而不是底部和右侧。谢谢你的提醒。我已经很久没有为Canvas编写任何东西了。更具体地说，
createLinearGradient
和
fillRect
中的坐标是相互独立的，因此如果渐变没有发生在
fillRect
定义的坐标内，它一点也看不见。哦，所以梯度必须匹配矩形的位置，如果我想保持矩形在100100，梯度必须在哪里覆盖它？100100的矩形是没有大小的矩形！！0,0100100处的矩形是宽度为100、高度为100的矩形。@Intervalia no A矩形100100是一个100px正方形，其左上角位于100100坐标处。rect的参数是x，y，width，heightAh，我忘了它是宽度和高度，而不是底部和右侧。谢谢你的提醒。我已经很久没有为画布写任何东西了。当你创建渐变时，你不也需要在x=100开始渐变吗？也许我的数学计算不对，但是如果x为0，它会不会停留在屏幕的边缘，只垂直移动，因为只有y发生了变化？它会无限地移动到每个边缘的最后一种颜色，所以对于垂直渐变，不管x线在哪里，它都会沿着x轴以相同的方式扩散。对于倾斜的或水平的，你必须正确设置。嗯，那么当你创建一个线性梯度时，坐标是基于什么的呢？因为我试图将梯度与100100上的正方形匹配，但这似乎不起作用，梯度上的（0,0）是从正方形的左下角开始的吗？或者它是从整个罐子的坐标开始的，你给出的坐标是一段的坐标。颜色从这一部分向4个方向无限扩散。试着像第一个片段那样填充整个画布，并尝试使用不同的坐标来适应这个概念。当你创建渐变时，你不也需要从x=100开始渐变吗？也许我的数学计算不对，但是如果x为0，它会不会停留在屏幕的边缘，只垂直移动，因为只有y发生了变化？它会无限地移动到每个边缘的最后一种颜色，所以对于垂直渐变，不管x线在哪里，它都会沿着x轴以相同的方式扩散。对于倾斜的或水平的，你必须正确设置。嗯，那么当你创建一个线性梯度时，坐标是基于什么的呢？因为我试图将梯度与100100上的正方形匹配，但这似乎不起作用，梯度上的（0,0）是从正方形的左下角开始的吗？或者它是从整个罐子的坐标开始的，你给出的坐标是一段的坐标。颜色从这一部分向4个方向无限扩散。试着像第一个片段那样填充整个画布，并尝试使用不同的坐标来适应这个概念。