Question

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

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

使用与文本不同的背景颜色绘制HTML5画布？

1 个答案: