js canvas 用矩形做凸起凹陷雕刻效果使两条边的颜色不一样

要在canvas上创建凸起、凹陷、雕刻效果，并使两条边的颜色不同，可以使用以下步骤：

1. 创建一个矩形：

context.fillStyle = 'color'; // 设置填充颜色
context.fillRect(x, y, width, height); // 绘制矩形

2. 创建凸起效果： 使用两个不同颜色的线性渐变填充矩形，其中一个渐变从上到下，另一个渐变从左到右。这样可以创建一个立体效果。

// 创建从上到下的线性渐变
var gradient1 = context.createLinearGradient(x, y, x, y + height);
gradient1.addColorStop(0, 'color1');
gradient1.addColorStop(1, 'color2');

// 创建从左到右的线性渐变
var gradient2 = context.createLinearGradient(x, y, x + width, y);
gradient2.addColorStop(0, 'color3');
gradient2.addColorStop(1, 'color4');

// 填充矩形
context.fillStyle = gradient1;
context.fillRect(x, y, width, height);

context.fillStyle = gradient2;
context.fillRect(x, y, width, height);

3. 创建凹陷效果： 使用两个不同颜色的线性渐变填充矩形，其中一个渐变从下到上，另一个渐变从右到左。这样可以创建一个凹陷效果。

// 创建从下到上的线性渐变
var gradient1 = context.createLinearGradient(x, y + height, x, y);
gradient1.addColorStop(0, 'color1');
gradient1.addColorStop(1, 'color2');

// 创建从右到左的线性渐变
var gradient2 = context.createLinearGradient(x + width, y, x, y);
gradient2.addColorStop(0, 'color3');
gradient2.addColorStop(1, 'color4');

// 填充矩形
context.fillStyle = gradient1;
context.fillRect(x, y, width, height);

context.fillStyle = gradient2;
context.fillRect(x, y, width, height);

4. 创建雕刻效果： 使用两个不同颜色的线性渐变填充矩形，其中一个渐变从上到下，另一个渐变从左到右。然后使用globalCompositeOperation属性设置为"lighter"，在两个渐变叠加的地方创建雕刻效果。

// 创建从上到下的线性渐变
var gradient1 = context.createLinearGradient(x, y, x, y + height);
gradient1.addColorStop(0, 'color1');
gradient1.addColorStop(1, 'color2');

// 创建从左到右的线性渐变
var gradient2 = context.createLinearGradient(x, y, x + width, y);
gradient2.addColorStop(0, 'color3');
gradient2.addColorStop(1, 'color4');

// 填充矩形
context.fillStyle = gradient1;
context.fillRect(x, y, width, height);

context.globalCompositeOperation = 'lighter';
context.fillStyle = gradient2;
context.fillRect(x, y, width, height);

请注意，上面的代码中的'color1'、'color2'、'color3'和'color4'需要替换为实际的颜色值