在画布区域内使用的身体背景的抓取区域

我是新来的画布，我对它是如何从源代码到源代码的工作有点了解，但是我试图实现的是有些动态的。我想在我的页面上加载一个正文背景（使用带有封面的位置中心进行响应），然后提取一个区域，然后使用绿色垫片翻转进行操作。在画布区域内使用的身体背景的抓取区域

基本上，我会有一个木制面板背景，我想要创建一个隐藏的面板门，它会在悬停或点击后旋转显示背后的内容。

为了明确起见，我会有一个BS排在col-sm-4的支架上放一个瓶子，就像西餐厅一样。当你徘徊时，它会占据这样的背景，在它上面的PNG瓶，并复制它，让我旋转它，揭示一个产品的短暂blurb。

我不喜欢直接来到这里，这就是为什么我有这么几个帖子/得分..但是这真是让我难住。任何帮助正确的方向我会很乐意“小费”，如果它解决了。感谢大家。

这里是我的codepen截至目前...

`http://codepen.io/dtek516/pen/vKLOBp`

来源

2016-06-09 Derek Hughes

TweenLite的可以（间接）动画帆布图纸...

帆布图纸可以使用JavaScript对象进行控制。
Tweenlite可以在JavaScript对象上设置动画属性。

综合起来，您可以使用Tweenlite为JavaScript对象的属性设置动画，而该对象反过来控制画布上的图形。

这里的示例代码和演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var PI=Math.PI; 
 
var PI2=PI*2; 
 

 
var wheel={ 
 
    cx:cw/2, 
 
    cy:ch/2, 
 
    radius:Math.min(cw,ch)/2-20, 
 
    startAngle:PI/4, 
 
    angle:PI/4, 
 
    draw:function(){ 
 
     ctx.translate(this.cx,this.cy); 
 
     ctx.rotate(this.angle); 
 
     ctx.clearRect(0,0,cw,ch); 
 
     ctx.beginPath(); 
 
     ctx.arc(0,0,this.radius,0,PI2); 
 
     ctx.fillStyle='skyblue'; 
 
     ctx.strokeStyle='lightgray'; 
 
     ctx.lineWidth=3; 
 
     ctx.fill(); 
 
     ctx.stroke(); 
 
     ctx.fillStyle='red'; 
 
     ctx.font='18px verdana'; 
 
     ctx.textBaseline='middle'; 
 
     ctx.fillText('You Win!',40,0); 
 
     ctx.setTransform(1,0,0,1,0,0); 
 
     ctx.beginPath(); 
 
     ctx.moveTo(cw/2,ch/2); 
 
     ctx.lineTo(cw/2+30,ch/2); 
 
     ctx.strokeStyle='green'; 
 
     ctx.stroke(); 
 
    }, 
 
} 
 

 
var tl=TweenLite.to(wheel,5,{ 
 
    paused:true, 
 
    angle:PI2*2, 
 
    ease:"Quart.easeOut", 
 
    onUpdate:function(){this.target.draw();}, 
 
    onComplete:function(){console.log('complete',wheel);} 
 
    } 
 
); 
 

 

 
wheel.draw(); 
 

 
$('#play').click(function(){ tl.play(); }); 
 

 
$('#replay').click(function(){ tl.restart(); });

body{ background-color: ivory; } 
 
#canvas{border:1px solid red;}

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> 
 
<button id=play>Play</button> 
 
<button id=replay>Replay</button> 
 
<br><canvas id="canvas" width=300 height=300></canvas>

但它可能是更容易做你的悬停倒装揭示这样（无需帆布）：

将您的背景划分为8个img元素。背景是4张图片，显示的“信息卡”是4张图片。
侦听这些背景上的悬停/模糊事件img元素
在悬停时，使用Greensock的Tweenlite为悬停的背景图像设置动画，直到它与用户接近为止。
然后Tweenlite动画“信息卡”img从边缘旋转开始，直到它对用户平坦（平坦==完全显示）。
模糊时，反转2个显示动画，以便再次显示背景图像。

您可以使用Greensock的TimelineLite计划&运行两部分动画。

来源

2016-06-09 04:45:15 markE

在画布区域内使用的身体背景的抓取区域

回答

相关问题