Sábado, 2017-12-16
OSCAR MENA
Menú del sitio
Nuestra encuesta
Calificar mi sitio
Total de respuestas: 20
Estadísticas

Total en línea: 1
Invitados: 1
Usuarios: 0
Su navegador no soporta canvas :(


Si les parece bonito este banner, pueden usarlo de ejemplo en alguna página.
Primero el canvas despues de la etiqueta <body>:
<canvas width="800" height="200" id="Canvas">Su navegador no soporta canvas :(</canvas>

Despues el javascript y algunas variables:
<script language="javascript" type="text/javascript">
var c1=42, d1=102, c2=162, d2=62, c3=102, d3=112;
var cx1=10, dx1=10, cx2=-10,dx2=-10, cx3=10, dx3=-10;
var parrafo='Escribes aqui lo que sea.', pa=290;
var ind=0, ind2=26;

Despues las variables del canvas, su color de relleno y la función 'banner':
canvas = document.getElementById('Canvas');
ctx = canvas.getContext('2d');
canvas.style.background='rgb(255,192,128)';
banner();

Ahora la función 'banner' que es muy sencilla:
function banner(){ 
 ctx.fillStyle = 'rgb(0,0,0)';
 ctx.font = "bold 50px Comic Sans MS";
 ctx.fillText("Lo que tú quieras...", 280, 70);
 setInterval(function () { imagen(25,25); }, 100);
}

Ahora la función 'imagen' que es la que animara los dibujos y la frace.
En esta primera parte se anima la frase:
function imagen(){
 ind++;
 ctx.fillStyle = 'rgb(255,192,128)';
 ctx.fillRect(275, 100 ,485 ,100);
 ctx.fillStyle = 'rgb(110,40,30)';
 ctx.font = "bold 38px sans-serif";
 pa-=5;
 if(pa<=-200){pa=285;}
 ctx.fillText(parrafo, pa, 160);
 ctx.fillText(parrafo, pa+485, 160);


En la segunda parte se animan los dibujos, cuyos nombre son; color, paisaje, campo,y figu. Usamos dos contadores 'ind' e 'ind2', al llegar al final lo reiniciamos a '0':
 if(ind<25){
 color(25,25);
 }
 if(ind>=25 && ind<=175){
 color(25,ind);
 paisaje(25,ind-150);
 }
 if(ind>175 && ind<200){
 paisaje(25,25);
 }
 if(ind>=200 && ind<=350){
 ind2--;
 paisaje(25,ind2);
 campo(25,ind2+150);
 }
 if(ind>350 && ind<375){
 campo(25,25);
 ind2=24;
 }
 if(ind>=375 && ind<=525){
 ind2++;
 campo(25,ind2);
 figu(25,ind2-150);
 }
 if(ind>525 && ind<550){
 figu(25,25);
 }
 if(ind>=550 && ind<=700){
 ind2--;
 figu(25,ind2-150);
 color(25,ind2);
 }
 if(ind>=700){
 ind=0;
 }


En esta parte llamamos a la función 'tapa' que nos ayuda en la animación de los dibujos:
 tapa();
}

Y por último las funciones de los dibujos y la función 'tapa':
function tapa(){
 ctx.beginPath();
 ctx.fillStyle = 'rgb(255,192,128)';
 ctx.fillRect(25, 0 ,200 ,25);
 ctx.fillRect(25, 175 ,200 ,25);
 ctx.fillRect(0, 0 ,25 ,200);
 ctx.fillRect(225, 0 ,50 ,200);
 ctx.fillRect(760, 100 ,40 ,100);
 ctx.fillStyle = 'rgb(55,192,128)';
 ctx.fillRect(25, 15 ,200 ,10);
 ctx.fillRect(25, 175 ,200 ,10);
 ctx.fillRect(15, 15 ,10 ,170);
 ctx.fillRect(225, 15 ,10 ,170);
}
function color(a,b){ ctx.beginPath(); gradi=ctx.createRadialGradient(a+100, b+75,10, a+100, b+75, 70); gradi.addColorStop(0, 'rgb(255,0,0)'); gradi.addColorStop(0.5, 'rgb(0,255,0)'); gradi.addColorStop(1, 'rgb(0,0,255)'); ctx.fillStyle = gradi; ctx.rect(a, b ,200 ,150); ctx.fill(); }
function paisaje(a,b){ ctx.beginPath(); ctx.fillStyle = 'rgb(192,255,255)'; ctx.fillRect(a+0, b+0 ,200 ,150); ctx.fillStyle = 'rgb(192,255,128)'; ctx.moveTo(a+0, b+150 ); ctx.lineTo(a+0, b+100 ); ctx.bezierCurveTo(a+66 , b+40 ,a+92 , b+106 , a+160 , b+110 ); ctx.lineTo(a+160 , b+150 ); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'rgb(128,255,128)'; ctx.moveTo(a+70 , b+150 ); ctx.bezierCurveTo(a+128 , b+143 ,a+130 , b+94 , a+200 , b+88 ); ctx.lineTo(a+200 , b+150 ); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'rgb(255,255,128)'; ctx.moveTo(a+61 , b+35 ); ctx.arc(a+41 , b+35 , 20 , 0, 6.28, false); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'rgb(255,255,255)'; ctx.moveTo(a+131 , b+46 ); ctx.quadraticCurveTo(a+119 , b+29 , a+134 , b+21 ); ctx.quadraticCurveTo(a+141 , b+5 , a+154 , b+14 ); ctx.quadraticCurveTo(a+168 , b+8 , a+173 , b+20 ); ctx.quadraticCurveTo(a+184 , b+29 , a+174 , b+41 ); ctx.quadraticCurveTo(a+173 , b+53 , a+161 , b+50 ); ctx.quadraticCurveTo(a+153 , b+59 , a+146 , b+50 ); ctx.quadraticCurveTo(a+133 , b+56 , a+131 , b+46 ); ctx.fill(); }
function campo(a,b){ ctx.beginPath(); gradi=ctx.createLinearGradient(a, b, a, b+150 ); gradi.addColorStop(0, 'rgb(0,255,255)'); gradi.addColorStop(0.5, 'rgb(255,255,255)'); gradi.addColorStop(0.5, 'rgb(0,128,0)'); gradi.addColorStop(1, 'rgb(192,255,64)'); ctx.fillStyle = gradi; ctx.fillRect(a, b ,200 ,150); ctx.lineWidth = 3 ; gradi=ctx.createLinearGradient(a+50 , b+40 , a+50 , b+120 ); gradi.addColorStop(0, 'rgb(0,0,0)'); gradi.addColorStop(1, 'rgb(255,255,255)'); ctx.strokeStyle = gradi; ctx.moveTo(a+60 , b+110 ); ctx.lineTo(a+60 , b+40 ); ctx.lineTo(a+140 , b+40 ); ctx.lineTo(a+140 , b+110 ); ctx.stroke(); }
function figu(a,b){ c1=cx1+c1; if(c1>170){cx1=-10;} if(c1<30){cx1=10;} d1=dx1+d1; if(d1>120){dx1=-10;} if(d1<30){dx1=10;} c2=cx2+c2; if(c2>170){cx2=-10;} if(c2<30){cx2=10;} d2=dx2+d2; if(d2>120){dx2=-10;} if(d2<30){dx2=10;} c3=cx3+c3; if(c3>170){cx3=-10;} if(c3<30){cx3=10;} d3=dx3+d3; if(d3>120){dx3=-10;} if(d3<30){dx3=10;} ctx.beginPath(); ctx.fillStyle = 'rgb(205,152,128)'; ctx.rect(a, b ,200 ,150); ctx.fill(); ctx.save(); ctx.beginPath(); ctx.shadowColor = 'rgb(192,255,192)'; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 10; ctx.fillStyle = 'rgb(0,128,128)'; ctx.arc(a+c1 , b+d1 , 20 , 0, 6.28, false); ctx.fill(); ctx.beginPath(); ctx.shadowColor = 'rgb(255,255,192)'; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 10; ctx.fillStyle = 'rgb(255,128,64)'; ctx.arc(a+c2 , b+d2 , 20 , 0, 6.28, false); ctx.fill(); ctx.beginPath(); ctx.shadowColor = 'rgb(192,255,255)'; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 10; ctx.fillStyle = 'rgb(55,128,224)'; ctx.arc(a+c3 , b+d3 , 20 , 0, 6.28, false); ctx.fill(); ctx.restore(); }

Y terminamos cerrando el script, espero les halla gustado:
</script>

Formulario de entrada
Carrito de Compras
Su carrito de compras está vacío
Búscar
Amigos del sitio
  • Crea un sitio web gratis
  • Escritorio en Línea
  • Juegos Online Gratuitos
  • Video Tutoriales
  • Todos los Tags de HTML
  • Navegador Kits
  • Copyright MyCorp © 2017
    Constructor de sitios web - uCoz