Canvas HTML画布中的渐变

我在StackOverflow中的第一个问题。 有没有办法在HTML5画布中只创建LinearGradient，但在所有不同的矩形形状和大小上使用它，并获得相同的填充图案

var c = document.getElementById("myCanvas"),
ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 20, 0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"red");
ctx.fillStyle = grd; 

---

使用此渐变填充两个不同形状的矩形。

如果要使用一个渐变绘制多个矩形，必须使用标准化渐变（=[0,1]中的坐标），然后以标准化方式绘制矩形

解释：

var grd = ctx.createLinearGradient(0, 0, 1.0, 0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"red");

然后用以下工具绘制矩形：

function drawNormalizedRect(context, x,y,w,h) {
   context.save();
   context.translate(x,y);
   context.scale(w,h);
   context.fillRect(0,0,1,1);
   context.restore();
}

使用说明

ctx.fillStyle = grd; 
drawNormalizedRect(ctx, 200, 320, 40, 50);

var canvas=document.getElementById（'cv'）；
var ctx=canvas.getContext（'2d'）；
var grd=ctx.createLinearGradient（0,0,1.0,0）；
grd.ADDCORSTOP（0，“黑色”）；
grd.addColorStop（1，“红色”）；
ctx.fillStyle=grd；
对于（var i=0；i