如何使 context.fillText 中的文本不透明

Question

context.font = '20pt Calibri';
context.fillStyle = 'rgba(225,225,225,0.5)';
var width = context.measureText(message2).width;
context.fillRect(xIndent, yIndent+100, width, 60);

context.fillStyle = 'rgba(255,85,0,1.0)';
context.fillText(message3, xIndent, yIndent+100);

我希望context.fillText沒有透明度，並且context.fillRect有一些透明度

出於某種原因，我可以使兩者都透明或不透明

結果是文本和背景顏色具有相同的透明度

Answer 1

寫完第一個文本后，您需要重置所有內容。 因為你可以在你畫完或寫完東西后設置 fillStyle，它仍然會填充它。 所以，如果你想要一個接一個地繪制或寫入的東西，你需要重置所有東西，這樣下一個 fillStyle 就不會改變它的 fillStyle 。 寫完第一個文本后，您需要使用context.beginPath() 。 這是您更正的代碼：

context.font = '20pt Calibri';
context.fillStyle = 'rgba(225,225,225,0.5)';
var width = context.measureText(message2).width;
context.fillRect(xIndent, yIndent+100, width, 60);

context.beginPath();
context.fillStyle = 'rgba(255,85,0,1.0)';
context.fillText(message3, xIndent, yIndent+100);

每次你想畫畫或寫其他東西時最好使用context.beginPath() ......我希望這有幫助......