不显示渐变背景上的fillText

ctx.strokeStyle = 'white'; // 设置文本颜色
ctx.lineWidth = 2; // 设置文本描边宽度
ctx.strokeText('Hello, World!', x, y); // 绘制文本

ctx.font = '20px Arial'; // 设置文本样式
ctx.fillStyle = 'white'; // 设置文本颜色
ctx.fillText('Hello, World!', x, y); // 绘制文本

// 绘制背景
var gradient = ctx.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(x, y, width, height);

ctx.font = '20px Arial'; // 设置文本样式
ctx.fillStyle = 'white'; // 设置文本颜色

// 设置globalCompositeOperation属性
ctx.globalCompositeOperation = 'destination-over';

ctx.fillText('Hello, World!', x, y); // 绘制文本

// 绘制背景
var gradient = ctx.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(x, y, width, height);

// 恢复默认的globalCompositeOperation属性
ctx.globalCompositeOperation = 'source-over';