Creación de Vectores en HTML.
Elaboración de mi logo en html5.
Código del dibujo:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myLogoJamesWoodcockVillarejo");
var context = canvas.getContext("2d");
//Fondo total
context.rect(0, 0, 800, 600);
context.fillStyle = "rgb(0,88,152)";
context.fill();
context.beginPath(); // circulo blanco
context.arc(400, 220, 168, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.beginPath(); // circulo degrade
context.arc(400, 220, 152, 0, 2 * Math.PI, false);
var grd = context.createLinearGradient(280, 320, 520, 110);//280X, 320Y dnde empieza y los otros 2 donde termina
grd.addColorStop(0, "rgb(117,146,193)"); // azul, 0 donde inicia
grd.addColorStop(0.25, "rgb(255,255,255)"); // blanco, 0.25% donde va el primer corte de color
grd.addColorStop(0.50, "rgb(117,146,193)"); // azul, 050%
grd.addColorStop(0.75, "rgb(255,255,255)"); // blanco
grd.addColorStop(1, "rgb(117,146,193)"); // azul, porque él reconoce valores de 0 a 1 y los internos toca dividirlos en %
context.fillStyle = grd;
context.fill();
context.beginPath(); // circulo azul
context.arc(400, 220, 143, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(0,88,152)";
context.fill();
context.beginPath(); // circulo azul degrade soporta textos
context.arc(400, 220, 143, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(490, 310, 200, 490,310, 10);
grd.addColorStop(1, "rgb(255,255,255)"); // light blue
grd.addColorStop(0, "rgb(0,97,166)"); // dark blue
context.fillStyle = grd;
context.fill();
context.beginPath(); // comienzo el dibujo tipo corazon con degrade
context.moveTo(279, 167);
context.bezierCurveTo(283,152,309,86,401,87);
context.bezierCurveTo(493,85,520,152,525,166);
context.bezierCurveTo(530,180,507,225,401,171);
context.bezierCurveTo(296,225,273,180,279,167);
context.closePath(); // termina el dibujo
var grd = context.createLinearGradient(401, 123, 401, 185);//280X, 320Y donde empieza y los otros 2 donde termina
grd.addColorStop(0, "rgba(255,255,255,0.4)"); // azul, 0 donde inicia
grd.addColorStop(1, "rgba(117,146,193,0.4)"); // blanco, 0.25% donde va el primer corte de color, rgba da transparencia y se pone el $ a transparentar
context.fillStyle = grd;
context.fill();
context.beginPath(); // Letra T Sombra
context.moveTo(317,133);
context.bezierCurveTo(317,133,445,133,445,133);
context.bezierCurveTo(445,133,440,160,440,160);
context.bezierCurveTo(440,160,391,160,391,160);
context.bezierCurveTo(391,160,362,313,362,313);
context.bezierCurveTo(357,315,332,315,337,285);
context.bezierCurveTo(337,285,360,160,360,160);
context.bezierCurveTo(360,160,311,160,311,160);
context.bezierCurveTo(311,160,317,133,317,133);
context.closePath(); // termina el dibujo
context.fillStyle = "rgb(0,97,166)";
context.fill();
context.beginPath(); // Letra T
context.moveTo(312, 128);
context.bezierCurveTo(312,128,440,128,440,128);
context.bezierCurveTo(440,128,435,155,435,155);
context.bezierCurveTo(435,155,386,155,386,155);
context.bezierCurveTo(386,155,357,308,357,308);
context.bezierCurveTo(352,310,327,310,332,280);
context.bezierCurveTo(332,280,355,155,355,155);
context.bezierCurveTo(355,155,306,155,306,155);
context.bezierCurveTo(306,155,312,128,312,128);
context.closePath(); // termina el dibujo
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.beginPath(); // Letra C Sombra
context.moveTo(495,183);
context.bezierCurveTo(495,183,490,202,490,202);
context.bezierCurveTo(486,199,477,197,466,197);
context.bezierCurveTo(453,197,441,201,432,209);
context.bezierCurveTo(421,220,413,237,413,256);
context.bezierCurveTo(413,279,425,295,450,295); //
context.bezierCurveTo(460,295,470,294,477,290);
context.bezierCurveTo(477,290,478,307,467,313);
context.bezierCurveTo(464,314,460,315,445,315);
context.bezierCurveTo(411,315,389,294,389,259);
context.bezierCurveTo(389,231,401,207,420,193);
context.bezierCurveTo(433,182,450,177,468,177);
context.bezierCurveTo(483,177,493,180,495,183);
context.closePath(); // termina el dibujo
context.fillStyle = "rgb(0,97,166)";
context.fill();
context.beginPath(); // Letra C
context.moveTo(490,178);
context.bezierCurveTo(490,178,485,197,485,197);
context.bezierCurveTo(481,194,472,192,461,192);
context.bezierCurveTo(448,192,436,196,427,204);
context.bezierCurveTo(416,215,408,232,408,251);
context.bezierCurveTo(408,274,420,290,445,290);
context.bezierCurveTo(455,290,465,289,472,285);
context.bezierCurveTo(472,285,473,302,462,308);
context.bezierCurveTo(459,309,455,310,440,310);
context.bezierCurveTo(406,310,384,289,384,254);
context.bezierCurveTo(384,226,396,202,415,188);
context.bezierCurveTo(428,177,445,172,463,172);
context.bezierCurveTo(478,172,488,175,490,178);
context.closePath(); // termina el dibujo
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.font = "70pt lucidasans";
context.fillStyle = "rgb(255,255,255)" // text color
context.fillText("Tacto Creativo", 83, 500);
context.font = "40pt lucidasans";
context.fillText("Boutique Creativa",270, 550);
};
</script>
<title>Logo James Woodcock Villarejo</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="fuentes.css" rel="stylesheet" >
</head>
<body>
<canvas id="myLogoJamesWoodcockVillarejo" width="800" height="600">
</canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myLogoJamesWoodcockVillarejo");
var context = canvas.getContext("2d");
//Fondo total
context.rect(0, 0, 800, 600);
context.fillStyle = "rgb(0,88,152)";
context.fill();
context.beginPath(); // circulo blanco
context.arc(400, 220, 168, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.beginPath(); // circulo degrade
context.arc(400, 220, 152, 0, 2 * Math.PI, false);
var grd = context.createLinearGradient(280, 320, 520, 110);//280X, 320Y dnde empieza y los otros 2 donde termina
grd.addColorStop(0, "rgb(117,146,193)"); // azul, 0 donde inicia
grd.addColorStop(0.25, "rgb(255,255,255)"); // blanco, 0.25% donde va el primer corte de color
grd.addColorStop(0.50, "rgb(117,146,193)"); // azul, 050%
grd.addColorStop(0.75, "rgb(255,255,255)"); // blanco
grd.addColorStop(1, "rgb(117,146,193)"); // azul, porque él reconoce valores de 0 a 1 y los internos toca dividirlos en %
context.fillStyle = grd;
context.fill();
context.beginPath(); // circulo azul
context.arc(400, 220, 143, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(0,88,152)";
context.fill();
context.beginPath(); // circulo azul degrade soporta textos
context.arc(400, 220, 143, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(490, 310, 200, 490,310, 10);
grd.addColorStop(1, "rgb(255,255,255)"); // light blue
grd.addColorStop(0, "rgb(0,97,166)"); // dark blue
context.fillStyle = grd;
context.fill();
context.beginPath(); // comienzo el dibujo tipo corazon con degrade
context.moveTo(279, 167);
context.bezierCurveTo(283,152,309,86,401,87);
context.bezierCurveTo(493,85,520,152,525,166);
context.bezierCurveTo(530,180,507,225,401,171);
context.bezierCurveTo(296,225,273,180,279,167);
context.closePath(); // termina el dibujo
var grd = context.createLinearGradient(401, 123, 401, 185);//280X, 320Y donde empieza y los otros 2 donde termina
grd.addColorStop(0, "rgba(255,255,255,0.4)"); // azul, 0 donde inicia
grd.addColorStop(1, "rgba(117,146,193,0.4)"); // blanco, 0.25% donde va el primer corte de color, rgba da transparencia y se pone el $ a transparentar
context.fillStyle = grd;
context.fill();
context.beginPath(); // Letra T Sombra
context.moveTo(317,133);
context.bezierCurveTo(317,133,445,133,445,133);
context.bezierCurveTo(445,133,440,160,440,160);
context.bezierCurveTo(440,160,391,160,391,160);
context.bezierCurveTo(391,160,362,313,362,313);
context.bezierCurveTo(357,315,332,315,337,285);
context.bezierCurveTo(337,285,360,160,360,160);
context.bezierCurveTo(360,160,311,160,311,160);
context.bezierCurveTo(311,160,317,133,317,133);
context.closePath(); // termina el dibujo
context.fillStyle = "rgb(0,97,166)";
context.fill();
context.beginPath(); // Letra T
context.moveTo(312, 128);
context.bezierCurveTo(312,128,440,128,440,128);
context.bezierCurveTo(440,128,435,155,435,155);
context.bezierCurveTo(435,155,386,155,386,155);
context.bezierCurveTo(386,155,357,308,357,308);
context.bezierCurveTo(352,310,327,310,332,280);
context.bezierCurveTo(332,280,355,155,355,155);
context.bezierCurveTo(355,155,306,155,306,155);
context.bezierCurveTo(306,155,312,128,312,128);
context.closePath(); // termina el dibujo
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.beginPath(); // Letra C Sombra
context.moveTo(495,183);
context.bezierCurveTo(495,183,490,202,490,202);
context.bezierCurveTo(486,199,477,197,466,197);
context.bezierCurveTo(453,197,441,201,432,209);
context.bezierCurveTo(421,220,413,237,413,256);
context.bezierCurveTo(413,279,425,295,450,295); //
context.bezierCurveTo(460,295,470,294,477,290);
context.bezierCurveTo(477,290,478,307,467,313);
context.bezierCurveTo(464,314,460,315,445,315);
context.bezierCurveTo(411,315,389,294,389,259);
context.bezierCurveTo(389,231,401,207,420,193);
context.bezierCurveTo(433,182,450,177,468,177);
context.bezierCurveTo(483,177,493,180,495,183);
context.closePath(); // termina el dibujo
context.fillStyle = "rgb(0,97,166)";
context.fill();
context.beginPath(); // Letra C
context.moveTo(490,178);
context.bezierCurveTo(490,178,485,197,485,197);
context.bezierCurveTo(481,194,472,192,461,192);
context.bezierCurveTo(448,192,436,196,427,204);
context.bezierCurveTo(416,215,408,232,408,251);
context.bezierCurveTo(408,274,420,290,445,290);
context.bezierCurveTo(455,290,465,289,472,285);
context.bezierCurveTo(472,285,473,302,462,308);
context.bezierCurveTo(459,309,455,310,440,310);
context.bezierCurveTo(406,310,384,289,384,254);
context.bezierCurveTo(384,226,396,202,415,188);
context.bezierCurveTo(428,177,445,172,463,172);
context.bezierCurveTo(478,172,488,175,490,178);
context.closePath(); // termina el dibujo
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.font = "70pt lucidasans";
context.fillStyle = "rgb(255,255,255)" // text color
context.fillText("Tacto Creativo", 83, 500);
context.font = "40pt lucidasans";
context.fillText("Boutique Creativa",270, 550);
};
</script>
<title>Logo James Woodcock Villarejo</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="fuentes.css" rel="stylesheet" >
</head>
<body>
<canvas id="myLogoJamesWoodcockVillarejo" width="800" height="600">
</canvas>
</body>
</html>