canvas 文字背景

可以通过给 canvas 中的文字添加阴影或者使用 globalCompositeOperation 属性来实现文字背景效果。

1. 添加阴影：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.fillStyle = "white";
ctx.shadowColor = "red";
ctx.shadowBlur = 10;
ctx.fillText("Hello World", 50, 50);

2. 使用 globalCompositeOperation:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.fillStyle = "white";

ctx.globalCompositeOperation = "source-over";
ctx.fillText("Hello World", 50, 50);

ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "red";
ctx.fillRect(50, 30, 150, 50);

这段代码中，我们先在 canvas 上绘制了一段文字，然后设置 globalCompositeOperation 属性为 "destination-over"，这样后面绘制的图形会被放到所有已有的图形下面。然后再绘制一个红色矩形，就可以实现文字背景效果了。