<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<script type="text/javascript">
window.onload =function(){ var canvas =document.getElementById('gmail'); var context =canvas.getContext("2d");
context.fillStyle="#FAFAFA"; /* color del fondo */
context.strokeStyle="#BDBDBD"; /* color del trasado */
context.beginPath();/* inicio de trasado */
context.moveTo(0,471);/* punto de inicio x, y (30=x,0=y) */
context.quadraticCurveTo(0,71,81,524);
context.lineTo(81,524);
context.lineTo(634,524);
context.lineTo(714,472);/* dibuja linea */
context.quadraticCurveTo(714,1,664,2);
context.lineTo(714,80);
context.quadraticCurveTo(714,1,664,2);
context.lineTo(664,2);
context.lineTo(50,1);
context.quadraticCurveTo(1,1,2,50);
context.lineTo(2,82);
context.lineTo(0,463);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
context.fillStyle="#FF0000"; /* color del fondo */
context.strokeStyle="#FF0000"; /* color del trasado */
context.beginPath();/* inicio de trasado */
context.moveTo(356,336);/* punto de inicio x, y (30=x,0=y) */
context.lineTo(714,84);/* dibuja linea */
context.quadraticCurveTo(714,1,664,2);
context.lineTo(664,2);
context.lineTo(360,224);
context.lineTo(50,1);
context.quadraticCurveTo(1,1,2,50);
context.lineTo(2,81);
context.lineTo(356,336);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
context.fillStyle="#DF0101"; /* color del fondo */
context.strokeStyle="#DF0101"; /* color del trasado */
context.beginPath();/* inicio de trasado */
context.moveTo(2,82);/* punto de inicio x, y (30=x,0=y) */
context.lineTo(0,438);/* dibuja linea */
context.quadraticCurveTo(1,523,81,523);
context.lineTo(81,523);
context.lineTo(81,140);
context.lineTo(2,84);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
context.fillStyle="#DF0101"; /* color del fondo */
context.strokeStyle="#DF0101"; /* color del trasado */
context.beginPath();/* inicio de trasado */
context.moveTo(632,524);/* punto de inicio x, y (30=x,0=y) */
context.quadraticCurveTo(713,523,714,473);
context.lineTo(714,473);/* dibuja linea */
context.lineTo(715,83);
context.lineTo(632,140);
context.lineTo(632,524);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
context.fillStyle="#D8D8D8"; /* color del fondo */
context.strokeStyle="#D8D8D8"; /* color del trasado */
context.beginPath();/* inicio de trasado */
context.moveTo(632,524);/* punto de inicio x, y (30=x,0=y) */
context.lineTo(632,140);/* dibuja linea */
context.lineTo(356,337);
context.lineTo(632,524);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
context.fillStyle="#D8D8D8"; /* color del fondo */
context.strokeStyle="#D8D8D8"; /* color del trasado */
context.beginPath();/* inicio de trasado */
context.moveTo(356,337);/* punto de inicio x, y (30=x,0=y) */
context.lineTo(351,333);/* dibuja linea */
context.lineTo(83,514);
context.lineTo(81,525);
context.lineTo(356,337);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
//degradado de colores
var degradado=context.createLinearGradient(600,10,242,58,545,116);//puntos donde inician y terminan cada degradado
degradado.addColorStop(0,"#D8D8D8");
degradado.addColorStop(1,"#FFF");
//degradado.addColorStop(2,"#BDBDBD");
context.fillStyle=degradado;
context.beginPath();/* inicio de trasado */
context.moveTo(55,0);/* punto de inicio x, y (30=x,0=y) */
context.lineTo(360,223);
context.lineTo(668,2);
context.lineTo(55,0);
context.fill();
context.stroke();
context.closePath(); /* fin de la linea */
}
</script>
</head>
<body>
<canvas id="gmail" width="716" height="526"> </canvas>
</body>
</html>
Crear cuenta
