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

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

html canvas

Html 在画布中用白色填充textstroke（），同时保留黑色轮廓,html,canvas,Html,Canvas,在这个脚本中，一切都很顺利。文本的轮廓是黑色的，这很好。只是内部需要填充白色，保持相同的背景图像 <body> <canvas id="c" width="800" height="800"></canvas> <script> var c = document.querySelector("#c"); var ctx = c.getContext("2d"); var image = new Image()

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

<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>


var c=document.querySelector（“#c”）；
var ctx=c.getContext（“2d”）；
var image=新图像（）；
image.onload=函数（）{
log（“加载的图像”）；
//做点别的
ctx.drawImage（图像，0，0，c.宽度，c.高度）；
ctx.fillStyle=“rgb（0,0,0）”；
ctx.strokeStyle=“黑色”；
ctx.fill（）；
ctx.font=“bold 36pt冲击”；
ctx.lineWidth=3；
strokeText（“你好，你好！”，50，50）；
}
image.src=”http://i.stack.imgur.com/9HgIv.png";
//strokeText（“你好，你好！”，50，50）；

像这样…？

var c=document.querySelector（“#c”）；
var ctx=c.getContext（“2d”）；
var image=新图像（）；
image.onload=函数（）{
log（“加载的图像”）；
//做点别的
ctx.drawImage（图像，0，0，c.宽度，c.高度）；
ctx.fillStyle=“白色”；
ctx.strokeStyle=“黑色”；
ctx.font=“bold 36pt冲击”；
ctx.lineWidth=3；
fillText（“你好，你好！”，50，50）；
strokeText（“你好，你好！”，50，50）；
}
image.src=”http://i.stack.imgur.com/9HgIv.png";
body{背景色：象牙；}
#画布{边框：1px纯红；边距：0自动；}