Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: heckascriptОтветов: 3

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

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

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

javascriptcanvashtmlcsstransparency

Ответы

Ответ 1 · рейтинг 2 · markE

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

Ответ 2 · рейтинг 3 · Prasath K

Да, вы можете сделать это с помощью холста. Вы можете нарисовать текст на холсте с прозрачностью, используя 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.

Ответ 3 · рейтинг 2 · Thurstan

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

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

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы