Red de conocimiento informático - Material del sitio web - Cómo utilizar el lienzo HTML5 para dibujar dinámicamente diagramas de topología

Cómo utilizar el lienzo HTML5 para dibujar dinámicamente diagramas de topología

Dibujo dinámico del mapa topológico

1. Agregar referencia (haga clic con el botón derecho en el proyecto - Agregar referencia - Busque el archivo dll local (2. Utilice el espacio de nombres del código dentro del archivo dll (luego puede llamar al archivo dll Clases y métodos dentro de

Definición y uso:

El objeto Canvas representa el elemento HTML canvas - . , pero define una API para admitirlo. Operaciones de dibujo del lado del cliente con secuencias de comandos

Puede especificar el ancho y el alto directamente en el objeto, pero la mayor parte de su funcionalidad se logra a través del objeto CanvasRenderingContext2D, utilizando Canvas. método getContext() del objeto y pásele la cadena directa "2d" como único argumento. La etiqueta

se introdujo en Safari 1.3 y también es compatible con Firefox 1.5 y Opera 9 en ese momento. de escribir esta página de referencia. En IE, puede utilizar el proyecto de código abierto ExplorerCanvas en excanvas dot sourceforge dot net para simular la etiqueta y su API.

Consejo: si desea saber cómo hacerlo. Para usar para dibujar gráficos, puede visitar el tutorial en inglés de Canvas de Mozilla y el tutorial en chino de Canvas correspondiente

Uso de etiquetas para dibujar

La mayor parte de la API de dibujo de Canvas. no está definido en el elemento en sí, sino que está definido en el objeto "contexto de dibujo" obtenido a través del método getContext() del lienzo.

La API de Canvas también utiliza notación de ruta. una cadena de letras y números, pero se define a través de una serie de llamadas a métodos, como llamar a los métodos beginPath() y arc()

Una vez definida la ruta, otros métodos como fill (. )) operará en él. Varias propiedades del entorno de dibujo (como fillStyle) describen cómo se utilizan estas operaciones.

Nota: una de las razones por las que la API de Canvas es tan compacta es que no es compatible. dibujar texto. Para agregar texto a un gráfico de lienzo, debe dibujar el texto usted mismo y fusionarlo con una imagen de mapa de bits, o usar el posicionamiento CSS en la parte superior del lienzo para anular las propiedades del texto HTML. objeto de lienzo

propiedad de altura

La altura del lienzo. Al igual que con las imágenes, esta propiedad se puede especificar como un valor de píxel entero o como un porcentaje de la altura de la ventana. Después de cambiar este valor, se borrará cualquier dibujo en el lienzo. El valor predeterminado es 300.

Propiedad de ancho

El ancho del lienzo. Al igual que con las imágenes, esta propiedad se puede especificar como un valor de píxel entero o como un porcentaje del ancho de la ventana. Después de cambiar este valor, se borrará cualquier dibujo en el lienzo. El valor predeterminado es 300.