將文本添加到路徑

在HTML5 CanvasRenderingContext2D中，是否可以向當前路徑添加文本剪輯？將文本添加到路徑

// rectangle clip 
context.beginPath(); 
context.rect(0,0,100,100); 
context.clip(); 

// clip to text 
context.beginPath(); 
context.text("HELLO WORLD", 0, 20); // this function does not exist 
context.clip();

來源

2014-03-13 Bart van Heukelom

是否有可能文本添加到當前路徑，例如剪輯？

簡單的答案是否定的，文本路徑不會通過canvas背景暴露給我們，所以我們不能將它們用於諸如裁剪之類的東西。

的唯一方法是要麼：

使用複合模式「衝」爲文本的孔。與裁剪一樣工作的方式很多，但與遮罩相關的不僅僅是路徑。
手動從字體中提取文本路徑作爲多邊形，並將其與行，貝塞爾等一起使用。可幫助提取字體路徑的庫可能爲opentype.js。

來源

2014-03-13 19:58:24 K3N

可以使用合成繪製成文本（文本內的有效限幅到）

context.globalCompositeOperation =「源 - 在」將繪製新附圖僅發生在exsiting文本和新的形狀重疊（任何非重疊區域都是透明的）。

這裏的示例代碼和演示：http://jsfiddle.net/m1erickson/yWuw7/

enter image description here

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

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

    var img=new Image(); 
    img.onload=start; 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/water.jpg"; 
    function start(){ 

     canvas.width=img.width; 
     canvas.height=img.height; 

     ctx.font="138 verdana"; 
     ctx.fillText("See the",20,150); 
     ctx.fillText("Sea",20,300); 
     ctx.globalCompositeOperation="source-in"; 
     ctx.drawImage(img,0,0); 

    } 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <h4>Water image clipped to text using Compositing.</h4> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

如果你想要把一個矩形中的文本，然後你可以使用另一個複合（「目的地越過」），讓你借鑑現有像素下新的形狀

ctx.globalCompositeOperation="destination-over"; 
ctx.fillRect(15,20,275,150);

enter image description here

[加法：將裁剪文本到現有的背景]

如果你想保留的背景下，您可以輕鬆地創建屏幕外的畫布，做文本複合的drawImage該臨時畫布上。然後使用drawImage將臨時畫布繪製到可見畫布上。這樣你就可以修剪文本並保留現有的背景。

演示：http://jsfiddle.net/m1erickson/n7x8y/

enter image description here

來源

2014-03-13 16:38:57 markE

這可能會派上用場，但是（糾正我，如果我錯了），如果畫布上已經有像素（背景），這不起作用。 –

是的，任何現有的像素都將受到複合操作的影響。如果要保留背景，可以輕鬆創建一個屏幕外的畫布，然後在該臨時畫布上執行text-composite-drawImage。然後使用drawImage（offscreenCanvas，x，y）將臨時畫布繪製到可見畫布上。這樣你就可以修剪文本並保留現有的背景。祝你的項目好運！ – markE

將文本添加到路徑

回答

相關問題