Javascript HTML5画布移动alpha掩码
我有一个背景，假设它是绿草。在背景上我有一个黑色的覆盖层。我现在想要的是在覆盖层上做一个可移动的孔，这样你就可以看到背景，如下图所示 我对画布还很陌生，所以我不确定我应该寻找什么。阿尔法面具 所以我的问题是如何实现上图所示的效果？ 如果它是HTML，我会有两张草的图像，一张作为背景，另一张在div中的覆盖层上方，边界半径可以移动并计算位置Javascript HTML5画布移动alpha掩码,javascript,html,canvas,Javascript,Html,Canvas,我有一个背景，假设它是绿草。在背景上我有一个黑色的覆盖层。我现在想要的是在覆盖层上做一个可移动的孔，这样你就可以看到背景，如下图所示 我对画布还很陌生，所以我不确定我应该寻找什么。阿尔法面具 所以我的问题是如何实现上图所示的效果？ 如果它是HTML，我会有两张草的图像，一张作为背景，另一张在div中的覆盖层上方，边界半径可以移动并计算位置 谢谢。不久前，我在做一个小画布测试时做了类似的事情。您可以做的是在底层的顶部创建一个带有画布元素的div，并在顶层画布上绘制一个具有透明度的径向渐变。我这里
谢谢。不久前，我在做一个小画布测试时做了类似的事情。您可以做的是在底层的顶部创建一个带有画布元素的div，并在顶层画布上绘制一个具有透明度的径向渐变。我这里有一把小提琴： 特别是看看这段径向渐变的代码。上下文将附加到顶部div画布：
var gradient = tCTX.createRadialGradient(CANVAS_SIZE.x/2, CANVAS_SIZE.y/2, 250, CANVAS_SIZE.x/2, CANVAS_SIZE.y/2, 0);
gradient.addColorStop(0, "#000");
gradient.addColorStop(1, "transparent");
tCTX.fillStyle = gradient;
tCTX.fillRect(0, 0, CANVAS_SIZE.x, CANVAS_SIZE.y);
其中解释了梯度函数的参数。特别有用，因为它们不是很明显。你在寻找移动的“手电筒”效果吗？ 如果是这样的话，您可以通过绘制一个圆形路径，然后将其作为剪切区域使用：context.clip（） 在.clip（）之后绘制的任何内容都将通过剪裁路径查看 下面是代码和小提琴：
正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
window.requestAnimFrame=（函数（回调）{
返回window.requestAnimationFrame | | | window.webkitRequestAnimationFrame | | | window.mozRequestAnimationFrame | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
var半径=50；
var x=100；
var dx=10；
变量y=100；
var-dy=10；
无功延迟=10；
var img=新图像（）；
img.onload=函数（）{
var canvas1=document.getElementById（“图像”）；
var ctxImg=canvas1.getContext（“2d”）；
ctxImg.drawImage（img，0,0，img.width，img.height，0,0，canvas.width，canvas.height）；
制作动画（）；
}
img.src=”http://lh3.ggpht.com/_Z-i7eF_ACGI/TRxpFywLCxI/AAAAAAAAAD8/ACsxiuO_C1g/house%20vector.png";
函数animate（）{
如果（--delayer）这不是一个问题吗？公平地说，这可能太宽泛了？可能是应该/可以转移到Exchange的东西？所以要求一种技术是错误的？一个简单的答案，如“使用剪辑路径”我会的。我只是不知道要看什么。效果很好——渐变作为透明度！哦，谢谢你，这正是我想要的。我会尝试一下，然后再回来。如果我要在你的代码中添加一个停止/开始按钮来控制观察圈的运动，我会尝试调整什么。
<!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-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var radius=50;
var x=100;
var dx=10;
var y=100;
var dy=10;
var delay=10;
var img=new Image();
img.onload=function(){
var canvas1=document.getElementById("image");
var ctxImg=canvas1.getContext("2d");
ctxImg.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
animate();
}
img.src="http://lh3.ggpht.com/_Z-i7eF_ACGI/TRxpFywLCxI/AAAAAAAAAD8/ACsxiuO_C1g/house%20vector.png";
function animate() {
if(--delay<0){
// update
x+=dx;
if(x-radius<0 || x+radius>=canvas.width){dx=-dx;}
y+=dy;
if(y-radius<0 || y+radius>=canvas.height){dy=-dy;}
delay=10;
// draw stuff
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.beginPath();
ctx.arc(x,y, radius, 0, 2 * Math.PI, false);
ctx.clip();
ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
ctx.restore();
}
// request new frame
requestAnimFrame(function() {
animate();
});
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Image clipped by moving circle</p>
<canvas id="canvas" width=300 height=200></canvas>
<br/><p>Unclipped image</p>
<canvas id="image" width=300 height=200></canvas>
</body>
</html>