个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我正在尝试在 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);
但它不起作用。请帮我解决这个问题。
最佳答案
我不确定“不工作”是什么意思，但是......
Canvas 中有两种常见的文本 mask
目的地输出:文本将充当 cookies 切割机并删除在文本下方绘制的任何内容，但文本不会显示在透明像素上。
异或:文本将仅剪切 Canvas 上的不透明绘图，但文本将正常绘制。
这是代码和 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>
关于javascript - 文本屏蔽不适用于 HTML Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16212042/
29
4
0
我是一名优秀的程序员,十分优秀！