Маскировка текста не работает с холстом HTML

Question

Маскировка текста не работает с холстом HTML

Я пытаюсь сделать маскировку текста в JavaScript.

Ниже мой код:-

if(this.image!==null)
{
   canvasContext.drawImage(this.image, 0, 0, this.width, this.height);
}

canvasContext.font = "55px Arial";
canvasContext.textAlign = "center";
canvasContext.textBaseline = "middle";   
canvasContext.globalCompositeOperation = 'destination-out';
canvasContext.fillText("CENSORED", 250, 250);

Но это не работает. Пожалуйста, помогите мне решить эту проблему.

0

javascript html5-canvas masking globalcompositeoperation

Источник

user2319188 25 апр '13 в 10:12

1 ответ

Другие вопросы по тегам javascript html5-canvas masking globalcompositeoperation

user411591 25 апр '13 в 17:06 2013-04-25 17:06 · Answer 1 · 2013-04-25 17:06

Я не уверен, что означает "не работает", но…

Существует 2 распространенных вида маскировки текста на холсте

target-out: текст будет действовать как резак печенья и удалит все, что нарисовано под текстом, но текст не будет отображаться на прозрачных пикселях.

xor: текст будет вырезать только непрозрачные рисунки на холсте, но в противном случае текст будет нарисован нормально.

Вот код и скрипка: http://jsfiddle.net/m1erickson/n836N/

<style>
    body{ background-color: purple; }
    canvas{background-color: white; border:1px solid red;}
</style>

<script>
$(function(){

    var canvas1=document.getElementById("canvas1");
    var canvasContext1=canvas1.getContext("2d");
    var canvas2=document.getElementById("canvas2");
    var canvasContext2=canvas2.getContext("2d");

    // destination-out 
    // Text cuts-out everything under it
    // background is revealed in the cut-out
    makeGradientAndFont(canvasContext1,canvas1);
    canvasContext1.globalCompositeOperation = 'destination-out';
    canvasContext1.fillText("CENSORED", 175, 50);

    // xor
    // Text cuts-out everything it overlaps
    // But Text is drawn normally where canvas is transparent
    // background is revealed in the cut-out
    makeGradientAndFont(canvasContext2,canvas2);
    canvasContext2.globalCompositeOperation = 'xor';
    canvasContext2.fillText("CENSORED", 175, 50);

    function makeGradientAndFont(ctx,canvas){
        var grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
        grad.addColorStop( 0, '#0000FF');   
        grad.addColorStop(.3, '#00FFFF');
        grad.addColorStop(.4, '#99FFFF');   
        grad.addColorStop(.5, '#00FF00');
        grad.addColorStop(.6, '#FFFF00');
        grad.addColorStop(.8, '#F00000');
        ctx.rect(115, 0, canvas.width-115, canvas.height);
        ctx.fillStyle=grad;
        ctx.fill();
        ctx.fillStyle="black";
        ctx.font = "55px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle"; 
    }


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

</head>

<body>
    <canvas id="canvas1" width=350 height=100></canvas><br/>
    <canvas id="canvas2" width=350 height=100></canvas>
</body>
</html>