使用文本/无图像剪切画布元素答案

【问题标题】：Cut through a canvas element with text/no images使用文本/无图像剪切画布元素
【发布时间】：2013-04-02 05:26:05
【问题描述】：

我想制作一个元素，其中文本是透明的，而 div 的其余部分是实心的，这样如果它是固定的位置，你可以通过文本看到背景。

我通常只使用 alpha 映射的图像，但是，我需要用户随心所欲地更改此文本，以便无论元素中的文本是什么，它都是透明的。虽然你不能用普通的 div 做的关键是在包含文本的元素上有一个实际的背景颜色。

我对画布元素非常陌生，但我想知道是否可以使用画布元素，如果可以，您能否指出正确的方向？

【问题讨论】：

标签： javascript html css canvas transparency

【解决方案1】：

是的，您可以使用画布来做到这一点。您可以使用 rgba(red,blue,green,transparency_value) 在画布中绘制具有透明度的文本

HTML：

<canvas id="mycanvas" width="200" height="200" style="width:200px; height:200px; border:1px solid;">
</canvas>

脚本：

canvas = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#992200';
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fill();
ctx.closePath();

ctx.fillStyle = 'rgba(255,255,255,1)';
ctx.font = '10px verdana';
ctx.textAlign = 'center';
ctx.fillText("No transparency",canvas.width/2,10);

ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.font = '10px verdana';
ctx.textAlign = 'center';
ctx.fillText("This is Transparent[0.5]",canvas.width/2,canvas.height/2);

ctx.fillStyle = 'rgba(255,255,255,0.25)';
ctx.font = '10px verdana';
ctx.textAlign = 'center';
ctx.fillText("This is Transparent[0.25]",canvas.width/2,canvas.height - 10);

Live Demo

注意：设置 rgba() 应该是一个字符串（平均值应该用引号括起来）

【讨论】：

实际上，我正在寻找文本透明度完全穿过画布元素背面的东西，而你的却没有。
我以为你要求透明度

【解决方案2】：

您也可以通过合成来做到这一点：http://jsfiddle.net/m1erickson/9DLuT/

<!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-image:url("http://images4.fanpop.com/image/photos/23400000/water-water-23444632-2048-1277.jpg"); }
    canvas{border:1px solid red; position:absolute}
</style>

<script>
$(function(){

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

    ctx.save();
    ctx.beginPath();
    ctx.fillStyle="black";
    ctx.rect(0,0,canvas.width,canvas.height);
    ctx.fill();
    ctx.font="144pt Verdana";
    ctx.globalCompositeOperation="xor";
    ctx.beginPath();
    ctx.fillText("See",30,200);
    ctx.fill();
    ctx.restore();


}); // end $(function(){});
</script>

</head>

<body>
     <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>

【讨论】：

【解决方案3】：

您还可以考虑使用 SVG 剪贴蒙版，它更简单，并且不会遭受画布的“黑盒”综合症。

我正在尝试为您专门针对您的问题写一些东西。

与此同时，您可能会发现这篇文章会有所帮助。 http://demosthenes.info/blog/481/Text-Clipping-Masks-With-SVG

【讨论】：