2

テキストでキャンバスの円を描画しようとしていますが、キャンバスの背景色を円内のテキストの色とは異なるものにしたいと考えています。以下のコードでは、背景とテキストの両方に同じ色を使用しています..

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

1 に答える 1

4

これを試して：

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はテキストに を設定します。

于 2013-01-29T15:58:45.400 に答える