- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我见过一些很酷的图像 mask 和其他 CSS3 效果。我们可以仅使用 CSS3 实现这种效果,请参见下面的代码或查看工作 fiddle 。
HTML
<canvas id="canvas1" width="400" height="400"></canvas>
Javascript
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
can.addEventListener('mousemove', function(e) {
var mouse = getMouse(e, can);
redraw(mouse);
}, false);
function redraw(mouse) {
console.log('a');
can.width = can.width;
ctx.drawImage(img, 0, 0);
ctx.beginPath();
ctx.rect(0,0,500,500);
ctx.arc(mouse.x, mouse.y, 70, 0, Math.PI*2, true)
ctx.clip();
ctx.drawImage(img2, 0, 0);
}
var img = new Image();
img.onload = function() {
redraw({x: -450, y: -500})
}
img.src = 'http://placekitten.com/400/400';
var img2 = new Image();
img2.onload = function() {
redraw({x: -450, y: -500})
}
img2.src = 'http://placekitten.com/400/395';
function getMouse(e, canvas) {
var element = canvas,
offsetX = 0,
offsetY = 0,
mx, my;
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
return {
x: mx,
y: my
};
}
最佳答案
这是使用背景图像的替代方法。它更灵活,你会得到一个圆形(或任意形状)的视口(viewport):
http://jsfiddle.net/maackle/66uCs/
<div class="masker">
<img class="base" src="http://lorempixel.com/400/400/cats/1" />
<div class="overlay"></div>
</div>
.masker {
position: relative;
}
.overlay {
position: absolute;
display: none;
width: 100px;
height: 100px;
border-radius: 50%;
background: url(http://lorempixel.com/400/400/cats/2) no-repeat;
}
$('.masker').on('mousemove', function (e) {
var r, x, y, top, left, bottom, right, attr, $base, $overlay;
r = 100;
$base = $(this).find('.base');
$overlay = $(this).find('.overlay');
x = e.pageX - $base.offset().left;
y = e.pageY - $base.offset().top;
top = y - r / 2;
left = x - r / 2;
if (x < 0 || y < 0 || x > $base.width() || y > $base.height()) {
$overlay.hide();
} else {
$overlay.show().css({
'background-position': '' + (-left) + 'px ' + (-top) + 'px',
'left': left,
'top': top
});
}
});
//just for good measure
$('.masker').on('mouseout', function (e) {
$(this).find('.overlay').hide();
});
关于html - 使用 CSS3 可以创建这种图像 mask 效果吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17179677/
我有两个包含两个接近矩形的形状的蒙版。 面罩示例(黄色): 现在,我要确定其中一个遮罩比另一个遮罩更接近实际矩形。 有可能实现吗? 最佳答案 获取轮廓和(旋转的)矩形边界框之间的面积差。面积差异最小的
我最近从 numpy 1.11 升级到 numpy 1.13 希望摆脱这个屏蔽数组警告,但它仍然存在: MaskedArrayFutureWarning:在具有共享掩码的掩码数组上设置项目不会复制掩码
我需要在sencha中的选项卡面板中添加一个加载掩码,我在 Controller 中通过Ajax请求加载了一个商店,但是在商店加载之前我需要放置一个加载掩码,并且在商店加载之后已加载,我需要将其删除。
我希望能够设置或清除 uintX_t 的(多个)位。 i 是一个运行时变量 (uintX_t)。b 是一个运行时变量 (uintX_t),它被限制为 0 或 1。 mask 是编译时常量。 有没有比以
我有一个处理程序,更像是一个提交按钮。我想掩盖整个页面或该表单以显示等待消息,直到完成其余过程。我做到了,它在FF中有效,但在IE中没有成功,当我执行Ext.getCmp('').body.mask(
我有我使用 Snap SVG 的 JS 代码。在某些时候我使用 element.attr({mask:maskelement}); 在该片段中,element和 maskelement是我的 svg
我需要从图标(.ICO) 文件中获取XOR Mask 和AND Mask。 如果有人可以建议我如何从 Java 执行此操作,那就太棒了。如果没有,您是否知道有任何应用程序可以获取这两个掩码并允许您扔掉
我一直在尝试学习scenekit并完成了一本书,但只有碰撞检测部分不明白,也许是最重要的部分。有类别掩码、共谋掩码和物理体?.contactTestBitMask。 我想创建一个简单的游戏来实现这个目
我在 Canvas 上制作了一个矩形 mask ,我需要 mask 外的任何东西都具有 0.8 的不透明度,因此 mask 外的所有对象都被视为不透明请看一下 fiddle 。 http://jsfi
我有一个包含可滚动内容的 div。我想为其添加一个覆盖内容的颜色 mask ,但不会随内容滚动。 http://jsfiddle.net/6e9t1wt3/1/ *{box-sizing:bord
在我的代码中,我必须选择这两个表达式之一(其中 mask 和 i 是非常数整数 -1 > i & 1) 和 (mask & 1 << i) 哪个更快?,我们在Stack Overflow上找到一个类似
我有一个包含 Image 的 Imageview 。还有一个包含兔子形状的面具形状。我有一个代码可以给出以下结果。 - (UIImage*)mynewmaskImage:(UIImage *)imag
您可能熟悉 enum 位掩码方案,例如: enum Flags { FLAG1 = 0x1, FLAG2 = 0x2, FLAG3 = 0x4, FLAG4 = 0x8
在本文之后,我将尝试实现他们如何计算每个实体的对数概率的平均值(第3.3节)。更具体地说,每个实体的得分计算为其令牌上的日志概率的平均值。。我有一个实体列表和一些提示:。任务是为每个提示找到应该适合的
我正在尝试遮盖比 mask 小的背景图像。背景和蒙版之间的空间显示为黑色。 这是我正在使用的代码: batch.end(); batch.begin(); Gdx
因此,我一直在尝试将背景图像裁剪成圆形 六边形,我发现 webkit 令人惊叹的 mask 图像非常容易地解决了我所有的问题。遗憾的是,它仅适用于 Chrome 和 Safari(当然)。 我如何为非
我有两个Java项目数据服务应用程序和数据报告应用程序,数据服务应用程序生成用于某些处理和数据报告应用程序的某些数据应该使用数据服务应用程序来使用它生成的数据来生成一些报告,这两个应用程序都应该构建为
我有一个带有绿色背景的简单 Activity ,我正在尝试提供一个带有透明圆形区域的红色叠加层。这是我要实现的效果: Expected Image 根据我在网上找到的代码,我看到的是这样的: Resu
我关注了这个link创建一个名为 mask 的自定义操作。tensorflow op的主体是 def tf_mask(x, labels, epoch_, name=None): # add "la
正如标题所说,我有 self.view,我将其添加到它的 mask 中(link) 属性另一个 View ,但是当我使用 addSubview 添加更多 View 到 self.view 时,掩码被删
我是一名优秀的程序员,十分优秀!