Question

这个剧本中的一切都很好。文字的轮廓是黑色的，很好。只需要在内部填充白色，保持相同的背景图像。

<body>
  <canvas id="c" width="800" height="800"></canvas>

  <script>

    var c = document.querySelector("#c");
    var ctx = c.getContext("2d");

    var image = new Image();

    image.onload = function(){
      console.log("Loaded image");

      // do something else
      ctx.drawImage(image, 0, 0, c.width, c.height);
      ctx.fillStyle = "rgb(0,0,0)";
      ctx.strokeStyle = "Black";
      ctx.fill();
      ctx.font = "bold 36pt impact";
      ctx.lineWidth = 3;

      ctx.strokeText("Hello Hello!", 50, 50);

    }
    image.src = "http://i.stack.imgur.com/9HgIv.png";
  //ctx.strokeText("Hello Hello!", 50, 50);

  </script>
</body>

Answer 1

像这样......？

＆＃13;

var c = document.querySelector("#c");
var ctx = c.getContext("2d");

var image = new Image();

image.onload = function(){
  console.log("Loaded image");

  // do something else
  ctx.drawImage(image, 0, 0, c.width, c.height);
  ctx.fillStyle = "white";
  ctx.strokeStyle = "Black";
  ctx.font = "bold 36pt impact";
  ctx.lineWidth = 3;

  ctx.fillText("Hello Hello!", 50, 50);
  ctx.strokeText("Hello Hello!", 50, 50);

}
image.src = "http://i.stack.imgur.com/9HgIv.png";

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

＆＃13;

<canvas id="c" width=300 height=300></canvas>

＆＃13;

在画布中用白色填充textstroke（），同时保持黑色轮廓

1 个答案: