Cómo dibujar rectángulos y texto con el canvas de html5

Unas formas primitivas se pueden extraer directamente en el contexto gráfico de la lona elemento de HTML5. Las formas más comunes son rectángulos y texto, que también pueden tener sombras. He aquí cómo crear ambos.

Video: Tutorial N°4: Graphic2D en JAVA (Eclipse - Netbeans) Lineas, Óvalos y Rectángulos

Dibujar rectángulos con canvas de HTML5

Se pueden dibujar tres tipos diferentes de rectángulos, como se muestra en la figura:

• clearRect (x, y, w, h): Borra un rectángulo con la esquina superior izquierda (x, y) Y el tamaño (w, h). En general, el borrado dibujar en el color de fondo.

• fillRect (x, y, w, h): Dibuja un cuadro con la esquina superior izquierda (x, y) Y el tamaño (w, h). El rectángulo se rellena con la definición actual fillStyle.

• strokeRect (x, y, w, h): Dibuja un cuadro con la esquina superior izquierda (x, y) Y el tamaño (w, h). El cuadro está vacío, pero el esquema se dibuja en el definido por el momento strokeStyle y el uso de la corriente ancho de línea.

  

Aquí está el código que genera la figura:

función draw () {dibujo var = document.getElementById ("dibujo") Con -VAR = drawing.getContext ("2d") -con.fillStyle = "rojo"-con.strokeStyle = "verde"-con.lineWidth = "5"-con.fillRect (10, 10, 180, 80) -con.strokeRect (10, 100, 180, 80) -} // sorteo final

Dibujo con texto canvas de HTML5

los lona etiqueta tiene soporte completo para el texto. Se puede añadir texto en cualquier lugar en el lienzo, utilizando cualquier estilo de fuente y tamaño que desee, como se muestra en esta ilustración de un lienzo con texto incrustado:

El primer paso en la elaboración de texto es elegir el tipo de letra. Fuentes de lona se crean mediante la asignación de un tipo de letra de la década de contexto fuente atributo. Las fuentes se definen como la asignación de letra de una sola cadena en CSS. Puede especificar todas las características de la fuente en el mismo orden que usted hace cuando se utiliza el acceso directo de la fuente: estilo, variante, el peso, el tamaño y la familia.

Video: Canvas - Como dibujar con C++ Builder: Rectangulos, Circulos, etc

Cuando esté listo para mostrar texto real en la pantalla, utilice el fillText () método, que acepta tres parámetros: el texto para mostrar y la posición X e Y de la izquierda; la parte del texto. El código siguiente produce los resultados en la figura:

función draw () {dibujo var = document.getElementById ("dibujo") Con -VAR = drawing.getContext ("2d") - // clara backgroundcon.fillStyle = "blanco"-con.fillRect (0,0, 200, 200) - // dibujar fuente en redcon.fillStyle = "rojo"-con.font = "20pt sans-serif"-con.fillText ("Rocas lona!", 5, 100) -con.strokeText ("Rocas lona!", 5, 130) -} // sorteo final