我想用文本绘制一个 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>
最佳答案
试试这个:
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
。
关于html - 使用与文本不同的背景颜色绘制 HTML5 Canvas?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14586895/