html - 绘制背景颜色与文本不同的 HTML5 Canvas？

Question

我想用文本绘制一个 Canvas 圆圈，但我希望 Canvas 背景颜色与圆圈中文本的颜色不同。我下面的代码对背景和文本使用相同的颜色..

<canvas id="circlecanvas" width="50" height="50"></canvas>
<script>
    var canvas = document.getElementById("circlecanvas");
    var context = canvas.getContext("2d");
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    context.arc(centerX, centerY, 25, 0, Math.PI * 2, false);
    context.fillStyle ="#dbbd7a";
    context.fill()
    context.font = 'bold 20pt Calibri';
    context.textAlign = 'center';
    context.fillText('34', centerX, centerY);
</script>

Answer 1

试试这个:

context.arc(centerX, centerY, 25, 0, Math.PI * 2, false);
context.fillStyle ="#dbbd7a";
context.fill()
context.font = 'bold 20pt Calibri';
context.textAlign = 'center';

context.fillStyle ="#ff0000";  // <-- Text colour here
context.fillText('34', centerX, centerY);

因此，基本上，为文本设置 context.fillStyle。