Canvas






body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}





var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle= 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
//line border
context.lineWidth = 15;
// line color
context.strokeStyle = 'blue';
context.stroke();









Su navegador no soporta el elementocanvas de HTML5.


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
/*
Para dibujar un círculo en un lienzo, se utilizará el siguiente método:
arc(x,y,r,start,stop,direction)
Ver: http://livedocs.adobe.com/flash/9.0_es/ActionScriptLangRefV3/Math.html
Ver: http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
Para calcularun valor en radianes, utilice la siguiente fórmula: radians = degrees * Math.PI/180
Para calcular los grados a partir de radianes, utilice la siguiente fórmula: degrees = radians * 180/Math.PI
*/
//Si realiza varias figuras es obligatorio el uso del metodo beginPath() - Establece coordenadas;
ctx.beginPath();
//Ver: http://es.wikipedia.org/wiki/Separador_decimalctx.arc(95,50,40,0,1.5*Math.PI,false);
ctx.fill();









Su navegador no soporta el elemento canvas de HTML5.


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
/*
Para dibujar un círculo en un lienzo, se utilizará el siguiente método:
arc(x,y,r,start,stop,direction)
Ver:http://livedocs.adobe.com/flash/9.0_es/ActionScriptLangRefV3/Math.html
Ver: http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
Para calcular un valor en radianes, utilice la siguiente fórmula: radians = degrees * Math.PI/180
Para calcular los grados a partir de radianes, utilice la siguiente fórmula: degrees = radians * 180/Math.PI
*/
//Si realiza varias figuras es obligatorio el uso del metodo beginPath() -Establece coordenadas;
ctx.beginPath();
//Ver: http://es.wikipedia.org/wiki/Separador_decimal
ctx.arc(95,80,20,0,2*Math.PI,true); /* Circulo Arriba*/
ctx.stroke();
ctx.beginPath();
ctx.arc(95,120,20,0,2*Math.PI,true); /* Circulo Abajo*/
ctx.stroke();
ctx.beginPath();
ctx.arc(117,110,5,0,2*Math.PI,true); /* Mano derecha*/
ctx.fill();
ctx.beginPath();ctx.arc(80,140,5,0,2*Math.PI,true); /* Mano izquierda*/
ctx.fill();
ctx.beginPath();
ctx.arc(95,80,8,0,1*Math.PI,false); /* sonrisa*/
ctx.fill();


var canvas = document.getElementById('myCanvas'); /* inicio copete rojo*/
ctx.fill();
var context = canvas.getContext('2d');
var x = 95
var y = 75
var radius = 20;
var startAngle = 1*Math.PI;
var endAngle = 1.5 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
//line border
context.lineWidth = 10;
// line color
context.strokeStyle = 'red';
context.stroke(); /* final copete rojo*/










Su navegador no soporta elelemento canvas de HTML5.


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
/*
Para dibujar un círculo en un lienzo, se utilizará el siguiente método:
arc(x,y,r,start,stop,direction)
Ver: http://livedocs.adobe.com/flash/9.0_es/ActionScriptLangRefV3/Math.html
Ver: http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/...