Question

可能是容易的事情，但是可以将这个绿色文本Text 1设为黑色，以便在绿色方块上方可见吗？

    var c = document.getElementById("canva");
    var ctx = c.getContext("2d");
    ctx.font = "20px Arial black";
    ctx.strokeStyle = 'black';
    ctx.fillStyle = "green";
    ctx.fillRect(60,60,80,80);
    ctx.fillText("Text 2",120,130);
    ctx.strokeText("Text 1",55,50);

<canvas id="canva" width="200" height="200" style="border:3px dotted red; border-radius: 5px;"></canvas>

Answer 1

Text 1已经是黑色，但它只是一个中风，而不是填充。您可以在绘制框之后但在设置文本之前重置Text 2来更改填充颜色（fillStyle）：

＆＃13;

var c = document.getElementById("canva");
    var ctx = c.getContext("2d");
    ctx.font = "20px Arial black";
    ctx.strokeStyle = 'black';
    ctx.fillStyle = "green";
    ctx.fillRect(60,60,80,80);
    ctx.fillStyle = 'black';
    ctx.fillText("Text 2",120,130);
    ctx.strokeText("Text 1",55,50);

＆＃13;

<canvas id="canva" width="200" height="200" style="border:3px dotted red; border-radius: 5px;"></canvas>

＆＃13;

Answer 2

＆＃13;

<script>
 var c = document.getElementById("canva");
    var ctx = c.getContext("2d");
    ctx.font = "20px Arial black";
    ctx.strokeStyle = 'black';
    ctx.fillStyle = "green";
    ctx.fillRect(60,60,80,80);

    ctx.strokeText("Text 2",120,130);

    ctx.strokeText("Text 1",55,50);
</script>

＆＃13;

用不同颜色的文本从帆布矩形内的彩色方块

2 个答案: