fillText
和fillRect
是Canvas API的两个方法,分别用于填充文本和矩形。它们都使用了fillStyle属性来确定填充的颜色。
如果你在调用fillText
之后调用fillRect
,并且两者使用了相同的fillStyle属性,那么fillRect
会覆盖fillText
的填充颜色。这是因为fillRect
会创建一个新的路径,并且这个新的路径会成为当前路径,而fillText
是在之前的路径上创建的。
如果你想要在填充矩形的同时保留文本的填充颜色,你可以在调用fillRect
之前使用beginPath
方法开启一个新的路径。这样,fillRect
就会在新路径上创建矩形,而不会影响到之前的文本路径。
以下是一个简单的示例代码:
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'red'; // 设置填充颜色为红色
ctx.fillText('Hello World', 10, 50); // 在画布上填充文本
ctx.beginPath(); // 开启新的路径
ctx.fillStyle = 'blue'; // 设置填充颜色为蓝色
ctx.fillRect(10, 60, 100, 100); // 在新路径上填充矩形