18-06-2015, 12:00 PM
0
Aca les dejo un codigo simple para dibujar un smile usando solo algunos pocos estilos, algo de javascirpt y un canvas.
Primero agregamos el agregamos en el tag "style"
Despues en el tag "script"
Y por ultimo el HTML
Pruebenlo y fijense lo q sale con solo este codigo y sin usar ninguna imagen...
Saludos
Primero agregamos el agregamos en el tag "style"
Código:
H1 {
font-family: Arial, Sans-serif;
font-size: 24px;
color: navy;
font-weight: normal;
position: absolute;
left: 45px;
top: 0;
}
Despues en el tag "script"
Código:
window.onload = function() {
var drawingCanvas = document.getElementById('myDrawing');
// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas && drawingCanvas.getContext) {
// Initaliase a 2-dimensional drawing context
var context = drawingCanvas.getContext('2d');
// Create the yellow face
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// Add 2 green eyes
context.strokeStyle = "#000000";
context.fillStyle = "#FFFFFF";
context.beginPath();
context.arc(80,80,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
context.fillStyle = "#009966";
context.beginPath();
context.arc(80,80,5,0,Math.PI*2,true);
context.closePath();
context.fill();
context.strokeStyle = "#000000";
context.fillStyle = "#FFFFFF";
context.beginPath();
context.arc(120,80,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
context.fillStyle = "#009966";
context.beginPath();
context.arc(120,80,5,0,Math.PI*2,true);
context.closePath();
context.fill();
// Create the diamond-shaped nose
context.fillStyle = "#000000";
context.beginPath();
context.moveTo(93,100);
context.lineTo(100,93);
context.lineTo(107,100);
context.lineTo(100,107);
context.closePath();
context.fill();
// Add the smile
context.strokeStyle = "#000000";
context.beginPath();
context.moveTo(70,110);
context.quadraticCurveTo(100,150,130,110);
context.quadraticCurveTo(100,150,70,110);
context.closePath();
context.stroke();
}
}
Y por ultimo el HTML
Código:
<canvas height="200" width="200" id="myDrawing">
<p>Your browser doesn't support canvas.</p>
</canvas>
Pruebenlo y fijense lo q sale con solo este codigo y sin usar ninguna imagen...
Saludos