Javascript在 Canvas 填充样式上绘制语音气泡仅更改文本颜色

Question

我目前正在尝试使用 javascript 创建一个应该在 Canvas 元素上绘制的语音气泡。 .

我的问题: ctx.fillStyle = "red";只是改变ctx.fillText颜色。但不是整个路径的背景颜色。如何为整个语音气泡添加背景颜色？

jsfiddle:https://jsfiddle.net/dr7q5yay/8/

我当前的代码如下所示:

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

ctx.font = "15px Helvetica";
var text = 'hello test test';

function drawBubble(ctx, x, y, w, h, radius, text)
{
   var r = x + w;
   var b = y + h;

   ctx.beginPath();
   ctx.fillStyle = "red";
   ctx.fill();
   ctx.strokeStyle = "black";
   ctx.lineWidth = "2";
   ctx.moveTo(x + radius, y);

   ctx.lineTo(r - radius, y);
   ctx.quadraticCurveTo(r, y, r, y + radius);
   ctx.lineTo(r, y + h-radius);
   ctx.quadraticCurveTo(r, b, r - radius, b);
   ctx.lineTo(x + radius, b);
   ctx.quadraticCurveTo(x, b, x, b - radius);
   ctx.lineTo(x, y + radius);
   ctx.quadraticCurveTo(x, y, x + radius, y);
   ctx.stroke();
   ctx.fillText(text, x + 20, y + 30);
}

drawBubble(ctx, 10, 60, ctx.measureText(text).width + 40, 50, 20, text);

Answer 1

代码差不多了，只需对 fill() 进行一些更改即可和 fillStyle :



Modified fiddle

顺便说一句，您可以使用 arc() s to draw a rounded rectangles以及(略少开销)。