HTML5 Canvas - Creación de una cara sonriente con la API de ARC


En este artículo, voy a compartir mi experiencia con HTML 5 lienzo ARC API que he jugado con la construcción de composiciones básicas con círculos y arcos.

En primer lugar, utilizar el ARC API, debe tener un conocimiento básico de PI.




PI

En matemáticas, PI se define como un transendental número, es decir, la relación entre la circunferencia de un círculo y su diámetro. PI tiene un valor aproximado de 3141 592 y por lo general se define por este símbolo π.

En HTML5 Canvas, PI se define como Math.PI

Para aprender más sobre PI aquí

En matemáticas, 2 * PI completará todo el diámetro de un círculo. Así que si dividimos un círculo en cuatro segmentos cada segement de será equivalente a 0,5 * PI

Ver la imagen de abajo para ver esta

Inicio del documento HTML 5

Para empezar nuestro experimento HTML 5, primero cree un archivo llamado arc.html a cualquier nombre que desee en la carpeta del proyecto.

También tendrá que incluir un jQuery archivo en algún lugar en el proyecto y llamar a la jQuery en el documento HTML.

Puede descargar la última copia de jQuery aquí

Aprenda los conceptos básicos de la lona

Experimento lienzo

Navegador no soporta lona

Ok a partir del código podrás ver sus cosas más o menos básico. He añadido la sección con una llamada al archivo de jQuery y dentro del cuerpo añadí un DIV con MiCanvas id que será donde se verá las formas.

El código en sí mismo a la creación de formas se sentará dentro de $ (Document) .ready () en el encabezado del documento HTML.

Así que ahora echemos un vistazo a la creación de nuestro primer formulario.

Permítanme empezar con la creación de la cara de perfil con una base círculo amarillo.

$ (Document) .ready (function () { var canvas = $ ("# MiCanvas"); contexto var = canvas.get (0) .getContext ("2d"); context.strokeStyle = "# 0000FF '; context.fillStyle = '# FFFF00'; context.lineWidth = 4; context.beginPath (); context.arc (100,75,50,0 Math.PI *, 2 * Math.PI, true); context.closePath (); context.stroke (); context.fill (); });

Primero decimos que DIV jQuery para apuntar para hacer el dibujo. En este caso estamos estableciendo la web como MiCanvas DIV en el cuerpo. Luego establecemos el contexto como 2D, ya que será un dibujo 2D.

Leer más contexto html5 2D aquí

Nuestra forma de círculo tiene algunas propiedades como, esquema (accidente cerebrovascular) Color, color de relleno, radio y centro co ordenado. Definimos estos valores para construir el círculo como se explica a continuación:

context.strokeStyle

Esto establece el color de trazo o esquema del círculo. Me puse a azul.

context.fillStyle

Este se utiliza para definir el color de relleno del círculo. En este caso se utilizó el código hexadecimal para el amarillo.

context.lineWidth

Esto define el trazo grueso de la frontera o contorno.

context.beginPath

Este es un método que elimina cualquier corriente ruta de dibujo para iniciar una ruta de acceso para una nueva forma de diseño. Esto es especialmente necesario si estamos construyendo una composición con varios objetos. El script se necesita saber dónde un diseño detiene y se inicia la siguiente

context.arc (100,75,50,0 Math.PI *, 2 * Math.PI, true);

Ahora bien, este es el núcleo de las API que definen el dibujo círculo.

El API se describe a continuación

context.arc (X, Y, Radius, beginAngle, endAngle, izquierda);

X es la coordenada X del centro del círculo desde el borde izquierdo del lienzo bloque. o 100 habrá 100px horizontalmente desde el borde izquierdo del lienzo bloque.

Y es la coordenada Y del centro del círculo que forma el borde superior del lienzo bloque. Así 75 se 75px verticalmente desde el borde superior de la lona de bloque.

Radio es auto explicativo. Radio de un círculo es la distancia desde cualquier punto en el diámetro en el centro del círculo.

beginAngle es donde se empieza a dibujar el círculo. En el caso que estamos empezando a 0 * Math.PI que se ilustra por el cuadro rojo en el diagrama anterior.

endAngle es donde el diseño del círculo se detendrá. En nuestro caso estamos haciendo un círculo completo en una forma que será 2 * Math.PI lo que significa que nuestro diseño finalizará el rojo. Si tuviéramos que dibujar un semicírculo, comenzaremos en ROJO y termina el amarillo, que es de 1 * Math.PI

antihorario

De forma predeterminada, este valor es FALSE, lo que significa que el diseño seguirá una ruta hacia la derecha, por lo que a partir de bsically pasar rojo AZUL luego amarillo, marrón y vuelve a ROJO. antihorario TRUE se iniciará de rojo a marrón a amarillo a azul y de vuelta a rojo otra vez.

closePath

Esto se utiliza para verificar la forma está cerrada. El diseño completo círculo esto no es obvio, pero si tuviéramos que dibujar un medio círculo, entonces usted puede ver el uso de este método. Digamos por ejemplo que quería dibujar un semicírculo de rojo a las agujas del reloj amarillo. Si yo no uso el método closePath sólo verá el arco que se extiende desde el rojo al amarillo en sentido horario. Si utilizo el método closePath verá el arco del rojo al amarillo, además de una línea de amarillo a rojo para llenar el medio círculo.

Finalmente, se aplica el método y el Stoke que se han definido las propiedades comienzan a llenar. El resultado será el contorno de la cara que es un círculo amarillo con un borde azul.

A continuación vamos a crear el arco que hace la sonrisa. Así que el código debería tener este aspecto:

$ (Document) .ready (function () { var canvas = $ ("# MiCanvas"); contexto var = canvas.get (0) .getContext ("2d"); // La cara context.strokeStyle = "# 0000FF '; context.fillStyle = '# FFFF00'; context.lineWidth = 4; context.beginPath (); context.arc (100,75,50,0 Math.PI *, 2 * Math.PI, true); context.closePath (); context.stroke (); context.fill (); // La sonrisa context.strokeStyle = "# FF0000"; context.lineWidth = 2; context.beginPath (); context.arc (100,65,40,0.2 Math.PI *, 0,8 * Math.PI, false); //context.closePath (); context.stroke (); //context.fill (); });

Nota en la sonrisa no he utilizado el método closePath. Se comentó que suficiente para ver el arco.

Observe también la 0.2 * Math.PI y 0.8 * Math.PI esquinas que definen el comienzo y el final.

El método de llenado no es necesario aquí también que no hay forma de llenar. El arco es una parte de un círculo y el círculo se define para comenzar a 100px izquierda y 65 píxeles desde la parte superior. con un radio menor de 40 px medida que el arco se sentará en el interior del círculo y por lo tanto se requiere un radio menor.

Ahora el dibujo debe tener este aspecto:

Por último añadimos los ojos para finalizar el diseño. Ojos será una tarea sencilla para añadir a llenar los círculos con puntos de radio y el centro más pequeños definidos en el círculo.

Así que el código debería tener este aspecto:

$ (Document) .ready (function () { var canvas = $ ("# MiCanvas"); contexto var = canvas.get (0) .getContext ("2d"); // La Cara context.strokeStyle = "# 0000FF '; context.fillStyle = '# FFFF00'; context.lineWidth = 4; context.beginPath (); context.arc (100,75,50,0 Math.PI * 2 * Math.PI, true); context.closePath (); context.stroke (); context.fill (); // La Sonrisa context.strokeStyle = "# FF0000"; context.lineWidth = 2; context.beginPath (); context.arc (100,65,40,0.2 Math.PI *, 0,8 * Math.PI, false); //context.closePath (); context.stroke (); //context.fill (); // El ojo izquierdo context.strokeStyle = "# 000000"; context.fillStyle = "# 000000"; context.beginPath (); context.arc (80,60,10,0 Math.PI *, 2 * Math.PI, false); context.closePath (); context.stroke (); context.fill (); // El ojo derecho context.strokeStyle = "# 000000"; context.fillStyle = "# 000000"; context.beginPath (); context.arc (120,60,10,0 Math.PI *, 2 * Math.PI, false); context.closePath (); context.stroke (); context.fill (); });

Ahora, guarde el archivo y abierto en su navegador para ver el resultado final se ve así:

(0)
(0)

Comentarios - 0

Sin comentarios

Añadir un comentario

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caracteres a la izquierda: 3000
captcha