3

テキストが透明で残りの div がソリッドである要素を作成したいので、固定位置の場合、テキストを通して背景まで見ることができます。

通常、これにはアルファマップされた画像を使用しますが、このテキストはユーザーが気まぐれに変更して、要素に含まれるテキストに関係なく透明になるようにする必要があります。ただし、通常の div ではできない重要な点は、テキストを含む要素に実際の背景色を設定することです。

私はキャンバス要素に非常に慣れていませんが、キャンバス要素を使用できるかどうか疑問に思っています。もしそうなら、正しい方向に私を向けることができますか?

4

3 に答える 3

3

はい、キャンバスでこれを行うことができます.. 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);

ライブデモ

注: rgba() の設定は文字列にする必要があります (意味は引用符で囲む必要があります)。

  1. fillText()について参照してください
  2. fillStyleについて見る
  3. textAlignについて見る
于 2013-04-02T05:44:27.210 に答える
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>
于 2013-04-02T06:01:04.840 に答える
2

SVG クリッピング マスクを検討することもできます。これは、はるかに単純で、キャンバスの「ブラック ボックス」シンドロームに悩まされることはありません。

特にあなたの問題について何かを書こうとしています。

それまでの間、この記事が役立つかもしれません。 http://demosthenes.info/blog/481/Text-Clipping-Masks-With-SVG

于 2013-04-03T08:53:20.597 に答える