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

Я пытаюсь сделать маскировку текста в javascript.Текст Маскировка не работает с HTML-холстом

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

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);

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

источник

2013-04-25 Tintin

Я не уверен, что «не работает» означает, но ...

Есть 2 общих видов текста маскирования в полотне

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

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

Вот код и Fiddle: 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>

источник

2013-04-25 17:06:40 markE

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

ответ

Смежные вопросы