Question

我有一个带有圆圈的Canvas，上面有一些文字。文本显示与strokeText函数完全匹配，但文本不会与fillText一起显示。

  var ctx=canvas.getContext("2d");

  // Create gradient

 var grd = ctx.createLinearGradient(16,15,16,30);
  grd.addColorStop(0,color1);
  grd.addColorStop(1,color2);

  // Fill with gradient

  ctx.beginPath();
  ctx.arc(16,17,15,0,2*Math.PI,false);
  ctx.fillStyle = grd;
 ctx.fill();
 //ctx.strokeRect(75,50,50,50);
    ctx.font = "italic 35px cursive grey";
     ctx.strokeText("i",11,27);

上面的代码是接受画布和两种颜色来绘制对象的函数的一部分。使用fillText函数它什么都不显示。谢谢。

Answer 1

请尝试以下代码。它的工作正常。希望它对你有所帮助。请检查并让我知道。感谢。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
    margin: 0px;
    padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = 11;
      var y = 27;

      var grd = context.createLinearGradient(16,15,16,30);
      grd.addColorStop(0, '#00ABEB');
      grd.addColorStop(0.5, '#fff');
      grd.addColorStop(0.5, '#66CC00');
      grd.addColorStop(1, '#fff');
      context.fillStyle = grd;
      context.beginPath();
      context.arc(16,17,15,0,2*Math.PI);
      context.fill();

      //context.arc(16,17,15,0,2*Math.PI,false);
      //context.fillRect(10,10,780,130);

      context.font = 'italic 35px cursive grey';
      context.lineWidth = 3;
      // stroke color
      context.strokeStyle = 'blue';
      context.strokeText('Hello World!', x, y);

    </script>
  </body>
</html>

strokeText（）工作时fillText（）不起作用

1 个答案: