用与文本不同的背景颜色绘制 HTML5 Canvas？答案

【问题标题】：Draw HTML5 Canvas with different background color than text?用与文本不同的背景颜色绘制 HTML5 Canvas？
【发布时间】：2013-01-30 15:41:12
【问题描述】：

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

<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>

【问题讨论】：

标签： html canvas html5-canvas geometry

【解决方案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。

【讨论】：

太棒了——效果很好。但是，现在我可以看到文字，它不是以圆圈为中心的！ textalign 似乎不起作用。希望将文本元素在圆圈中居中。
我打算用一个数字（动态变化）填充填充文本区域。这可能吗（我可以在其中放一个数字还是仅用于文本？）还是应该使用另一个属性在画布圆圈上显示数字？该数字用于网页 - page 1 , 2, 3 ，因此希望将圆圈中的数字更改为 i 页面通过网站。
@user2022284：你必须在分页时重新绘制画布的内容，并将其中的'34' 替换为数字变量。所以，是的，这是很有可能的。