Вырезать элемент холста с текстом/без изображений

Я хочу сделать элемент, в котором текст прозрачен, а остальная часть div сплошная, так что, если это фиксированное положение, вы можете видеть сквозь текст на фоне.

Обычно я просто использую для этого изображение с альфа-картой, однако мне нужно, чтобы этот текст был изменен пользователем по его прихоти, чтобы независимо от того, какой текст находится в элементе, он был прозрачным. Ключевым моментом здесь, который вы не можете сделать с обычным div, является фактический цвет фона для элемента, содержащего текст.

Я очень новичок в элементах холста, но мне интересно, возможно ли это сделать с элементом холста, и если да, не могли бы вы указать мне правильное направление?


javascript canvas html css transparency
person heckascript    schedule 02.04.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вы также можете сделать это с помощью композитинга: 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>
person markE    schedule 02.04.2013

arrow_upward
3
arrow_downward

Да, вы можете сделать это с помощью холста. Вы можете нарисовать текст на холсте с прозрачностью, используя rgba (красный, синий, зеленый, значение прозрачности)

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.
person Prasath K    schedule 02.04.2013
comment
на самом деле, я искал что-то, где прозрачность текста полностью прорезает заднюю часть элемента холста, чего нет у вас. - person heckascript; 02.04.2013
comment
Я думал, вы просите о прозрачности - person Prasath K; 02.04.2013

arrow_upward
2
arrow_downward

Вы также можете рассмотреть обтравочные маски SVG, которые намного проще и не страдают от синдрома «черного ящика», который представляет собой холст.

Я пытаюсь написать вам что-то конкретно по вашей проблеме.

А пока вам может помочь эта статья. http://demosthenes.info/blog/481/Text-Clipping-Masks-With-SVG

person Thurstan    schedule 03.04.2013