11 diciembre, 2016 / by fjmenendez / Javascript, Sin categoría / No Comments

Estrella de navidad con html5

Desde , os queremos desear feliz navidad

con esta estrella de navidad hecha en html5, con el objeto canvas

http://www.w3schools.com/html/html5_canvas.asp

estrella de navidad

Lo primero será crear el documento html con el canvas incustrado

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>

</body>
</html>

Le damos estilos

<style>
 body {
 margin: 0px;
 padding: 0px;
 }

myCanvas {
 background-color: red;
 }
 </style>

y pintamos

<script> 
var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');

//Agregamos el fondo de la capa

 
var grd1 = context.createRadialGradient(0, 0, 300, 600, 300, 300);
 grd1.addColorStop(0, "#ff3333");
 grd1.addColorStop(1, "#ff6666");
 context.fillStyle = grd1;
 context.fillRect(0, 0, 600, 300);

Dibujamos la estrella

 
 context.beginPath();
 context.moveTo(32, 67);
 context.lineTo(335, 103);
 context.lineTo(310, 71);
 context.lineTo(384, 85);
 context.lineTo(409, 20);
 context.lineTo(428, 86);
 context.lineTo(491, 86);
 context.lineTo(454, 131);
 context.lineTo(491, 188);
 context.lineTo(424, 171);
 context.lineTo(392, 234);
 context.lineTo(377, 174);
 context.lineTo(307, 184);
 context.lineTo(341, 146);
 context.lineTo(21, 162);
 context.lineTo(96, 144);
 context.lineTo(43, 132);
 context.lineTo(118, 109);
 context.lineTo(32, 67);
 context.lineWidth = 2;

La rellenamos

 var grd = context.createRadialGradient(335, 103, 300, 90, 60, 100);
 grd.addColorStop(0, "gray");
 grd.addColorStop(1, "white"); context.fillStyle = grd;
 context.fill();
 context.strokeStyle = 'gray';
context.stroke();
context.font = "30px Arial";
setTimeout(function () {
//mostramos un mensaje
context.fillText("Feliz Navidad", 10, 50);
}, 500);
</script>

el archivo final sería

<!DOCTYPE html>
<html>
<head>
 <style>
 body {
 margin: 0px;
 padding: 0px;
 }
#myCanvas {
 background-color: red;
 }
 </style>
</head>
<body>
 <canvas id="myCanvas" width="600" height="300"></canvas>
 <script> 
var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d'); 
  //Agregamos el fondo de la capa
 var grd1 = context.createRadialGradient(0, 0, 300, 600, 300, 300);
 grd1.addColorStop(0, "#ff3333");
 grd1.addColorStop(1, "#ff6666");
 context.fillStyle = grd1;
 context.fillRect(0, 0, 600, 300); 
 //Dibujamos la estrella
 context.beginPath();
 context.moveTo(32, 67);
 context.lineTo(335, 103);
 context.lineTo(310, 71);
 context.lineTo(384, 85);
 context.lineTo(409, 20);
 context.lineTo(428, 86);
 context.lineTo(491, 86);
 context.lineTo(454, 131);
 context.lineTo(491, 188);
 context.lineTo(424, 171);
 context.lineTo(392, 234);
 context.lineTo(377, 174);
 context.lineTo(307, 184);
 context.lineTo(341, 146);
 context.lineTo(21, 162);
 context.lineTo(96, 144);
 context.lineTo(43, 132);
 context.lineTo(118, 109);
 context.lineTo(32, 67);
 context.lineWidth = 2;
 //La rellenamos
 var grd = context.createRadialGradient(335, 103, 300, 90, 60, 100);
 grd.addColorStop(0, "gray");
 grd.addColorStop(1, "white"); 
  context.fillStyle = grd;
 context.fill();
context.strokeStyle = 'gray';
context.stroke();
context.font = "30px Arial";
setTimeout(function () {
//mostramos un mensaje
context.fillText("Feliz Navidad", 10, 50);
}, 500);
</script>
</body>
</html>

Feliz Navidad

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *