Question

我一直在编写一些JavaScript以创建自定义形状，如下面的代码片段所示。我成功地用不同的颜色填充了形状，但是当我尝试使用画布的fillText属性时，背景色消失了，在所应用的fillStyle中只有文本存在。我想保持文本和背景颜色不变。如何实现？

var canvas = document.getElementById('newCanvas');
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(280,300);
      ctx.lineTo(240,300);
      ctx.lineTo(280,200);
      ctx.closePath();
      ctx.fillStyle='skyblue';
      ctx.fillText('1',270,250);
      //ctx.fill();
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(280,300);
      ctx.lineTo(280,250);
      ctx.lineTo(240,300);
      ctx.closePath();
      ctx.fillStyle='#EAF356';
      ctx.fill();
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(280,300);
      ctx.lineTo(320,300);
      ctx.lineTo(280,200);
      ctx.closePath();
      ctx.fillStyle='green';
      ctx.fill();
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(280,300);
      ctx.lineTo(280,250);
      ctx.lineTo(320,300);
      ctx.closePath();
      ctx.fillStyle='#F59A4E';
      ctx.fill();
      ctx.stroke();

<canvas id="newCanvas" width="800" height="800" style="border: 1px solid"></canvas>

如何在通过画布制作的自定义形状中添加文字和颜色？

0 个答案: