Cree un efecto de Spotlight con Canvas y Scrawl. js
| Autor: | kaliedarik |
|---|---|
| Views Total: | 3,011 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 17, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Hace uso de < a href = "http://scrawl.rikweb.org.uk/" target = "_ blank" rel = "noopener" > Scrawl. js biblioteca para convertir una imagen en un Canvas objeto y para agregar un efecto de foco sobre el Canvas usando gradient.
Funcionamiento
Inserte una imagen en su página web.
<img src="1.jpg" id="demo" class="image-demo">
Hacer la imagen invisible y fijar posicionado en CSS.
img {
position: fixed;
visibility: hidden;
} Cree un elemento Canvas sobre la imagen.
<canvas id="mycanvas" width="750" height="375"></canvas>
Incluya la última biblioteca de canvas HTML5 de Scrawl. js al final del documento.
<script src="http://scrawl.rikweb.org.uk/js/scrawlCore-min.js"></script>
El JavaScript para crear un efecto de foco en la imagen.
var mycode = function(){
//define variables
var myPad = scrawl.pad.mycanvas,
here,
gradient,
myGloom,
mySpotlight;
//import images into scrawl library
scrawl.getImagesByClass('demo092');
//define designs (gradient)
gradient = scrawl.newRadialGradient({
name: 'spotlight',
startRadius: 50,
endRadius: 150,
color: [
{color: 'rgba(0,0,0,0)', stop: 0},
{color: 'rgba(0,0,0,0.8)', stop: 1},
],
});
//define sprites
scrawl.newPicture({
source: 'flower',
width: 750,
height: 500,
});
myGloom = scrawl.newBlock({
name: 'gloomy',
fillStyle: 'rgba(0,0,0,0.8)',
method: 'fill',
width: 750,
height: 375,
order: 1,
});
mySpotlight = myGloom.clone({
name: 'shiny',
fillStyle: 'spotlight',
});
//animation object
scrawl.newAnimation({
fn: function(){
here = myPad.getMouse();
if(here.active) {
gradient.set({
startX: here.x,
startY: here.y,
endX: here.x,
endY: here.y,
});
myGloom.set({visibility: false});
mySpotlight.set({visibility: true});
}
else {
myGloom.set({visibility: true});
mySpotlight.set({visibility: false});
}
scrawl.render();
},
});
};
scrawl.loadModules({
path: 'http://scrawl.rikweb.org.uk/js/',
modules: ['block', 'images', 'animation'],
callback: function(){
window.onload = function(){
scrawl.init();
mycode();
};
},
});
