在保持黑色轮廓的同时用白色填充textstroke（）

此脚本中的所有内容均已安装完毕。文字的轮廓是黑色的，很好。只需在里面填充白色保持相同的背景图像。在保持黑色轮廓的同时用白色填充textstroke（）

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

来源

2016-02-25 shunya

这样子......？

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

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

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

来源

2016-02-25 02:15:58 markE

在保持黑色轮廓的同时用白色填充textstroke（）

回答

相关问题