Programación API de lona HTML5

<script type = "text/javaScript">

intentar

{

document.createElement ("Canvas"). getContext ("2d");

document.getElementById ("soporte"). innerhtml = "ok";

}

captura (e)

{

document.getElementById ("soporte"). InnerHtml = e.message;

}

</script>

// Obtener el elemento Canvas y su contexto de dibujo var lienvas = document.getElementById ("diagonal");

var context = canvas.getContext ("2d");

// crear una ruta con coordenadas absolutas

context.beginPath ();

context.moveto (70, 140);

context.lineto (140, 70);

// Dibuja esta línea en lienzo

context.stroke ();

Los mismos efectos que anteriormente se pueden lograr a través de la transformación (escala, traducción, rotación), etc.

Dibujar líneas diagonales por transformación

// Obtener el elemento de lona y su contexto de dibujo

var canvas = document.getElementById ("diagonal");

var context = canvas.getContext ("2d");

// Guardar el estado de dibujo actual

context.save ();

// mover el contexto de dibujo a la parte inferior derecha

context.translate (70, 140);

// dibujar el mismo segmento de línea que el anterior con el origen como punto de partida

context.beginPath ();

context.moveto (0, 0);

context.lineto (70, -70);

context.stroke (); </p> <p> context.restore ();

Las rutas en la API de lienzo HTML5 representan cualquier forma que desee renderizar.

BeginPath (): No importa qué tipo de gráfico comience a dibujar, lo primero que debe llamar es BeginPath. Esta función simple no toma parámetros y se usa para notificar a Canvas que está a punto de comenzar a dibujar un nuevo gráfico.

Moveto (x, y): sin dibujo, mueva la posición actual a la nueva coordenada objetivo (x, y).

Lineto (x, y): no solo mueve la posición actual a la nueva coordenada objetivo (x, y), sino que también dibuja una línea recta entre las dos coordenadas.

ClosePath (): esta función se comporta muy como Lineto. La única diferencia es que ClosePath usará automáticamente la coordenada inicial de la ruta como coordenada objetivo. También informa al lienzo que la figura actualmente dibujada se ha cerrado o ha formado un área completamente cerrada, que es muy útil para futuros rellenos y golpes.

Dibuja un dosel de pino

function createCanoPypath (context) {

// Dibuja el dosel del árbol

context.beginpath (); </p> <p> context.moveto (-25, -50);

context.lineto (-10, -80);

context.lineto (-20, -80);

context.lineto (-5, -110);

context.lineto (-15, -110); </p> <p> // vértice del árbol

context.lineto (0, -140); </p> <p> context.lineto (15, -110);

context.lineto (5, -110);

context.lineto (20, -80);

context.lineto (10, -80);

context.lineto (25, -50);

// Conecte el punto de partida y cierre la ruta

context.ClosePath ();

} </p> <p> function drawtrails () {

var lienvas = document.getElementById ('diagonal');

var context = canvas.getContext ('2d'); </p> <p> context.save ();

context.translate (130, 250); </p> <p> // Crear una ruta que exprese el dosel

createCanopypath (contexto); </p> <p> // dibuja la ruta actual

context.stroke ();

context.restore ();

} </p> <p> window.adDeventListener ("Load", DrawTrails, True);

El modo de carrera permite que el dosel se vea más realista.

// ancho las líneas

context.linewidth = 4;

// El punto de unión del camino suave

context.lineJoin = 'Round';

//color

context.strokestyle = '#663300';

// Dibuja la ruta actual

context.stroke ();

Añademos troncos al árbol

context.save ();

context.translate (-10, 350);

context.beginpath (); </p> <p> // La primera curva se dobla a la parte superior derecha

context.moveto (0, 0);

context.quadraticCurveto (170, -50, 260, -190); </p> <p> // doblar hacia la parte inferior derecha

context.quadraticCurveto (310, -250, 410, -250); </p> <p> // Dibuja la ruta en un trazo marrón ancho ancho

context.strokestyle = '#663300';

context.linewidth = 20;

context.stroke (); </p> <p> // restaurar el estado de lienzo anterior

context.restore ();

Debe esperar hasta que la imagen esté completamente cargada antes de que pueda operarse. Los navegadores generalmente cargan imágenes de forma asincrónica cuando se ejecuta el script de la página. Si intenta convertir la imagen en lienzo antes de que esté completamente cargada, entonces el lienzo no mostrará ninguna imagen. Por lo tanto, preste especial atención a asegurarse de que la imagen se cargue antes de renderizar.

// Carga la imagen

var corta = nueva imagen ();

bark.src = "Bark.jpg"; </p> <p> // Después de cargar la imagen, llame a la función de dibujo

bark.onload = function () {

Drawtrails ();

}

Mostrar fotos:

El uso de gradientes requiere tres pasos:

(1) Crear un objeto de gradiente

(2) Establezca color para objetos de gradiente e indique el método de transición

(3) Establezca gradientes para estilos de relleno o estilos de trazo en contexto

// Crear un gradiente horizontal de tercer orden que se use como textura del tronco

var trunkgradient = context.createLineArgradient (-5, -50, 5, -50); </p> <p> // El borde izquierdo del tronco es de color marrón promedio

trunkgradient.addcolorStop (0, '#663300'); </p> <p> // Hay algo de color para hablar en el medio izquierdo del tronco del árbol

trunkgradient.addcolorStop (0.4, '#996600'); </p> <p> // El color del borde derecho debe ser más oscuro

TrunkGradient.addcolorStop (1, '#552200'); </p> <p> // Llena el tronco con gradientes

context.fillStyle = TrunkGradient;

context.fillrect (-5, -50, 10, 50);

// Crear un gradiente vertical para proyectar el dosel en el tronco

var canopyShadow = context.CreateLineArGradient (0, -50, 0, 0);

// El punto de partida del gradiente de proyección es negro con una transparencia del 50%

canopyshadow.addcolorstop (0, 'rgba (0, 0, 0, 0.5)');

// La dirección es verticalmente hacia abajo, y el gradiente rápidamente cambia gradualmente a completamente transparente dentro de una distancia muy corta, fuera de esta longitud

// No hay proyección en el tronco del árbol

canopyshadow.addcolorstop (0.2, 'rgba (0, 0, 0, 0.0)'); </p> <p> // complete el gradiente de proyección en el tronco

context.fillstyle = canopyShadow;

context.fillrect (-5, -50, 10, 50);

// Carga la imagen

var grava = nueva imagen ();

grave.src = "gravel.jpg";

grave.onload = function () {

Drawtrails ();

} </p> <p> // reemplazar líneas gruesas marrones con imágenes de fondo

context.StrokeStyle = context.createPattern (grava, 'repetir');

context.linewidth = 20;

context.stroke ();

El segundo parámetro de contexto. CreatePattern es el marcador repetible, y el valor apropiado se puede seleccionar en la Tabla 2-1.

Función de escala context.scale (x, y): x, y representan los valores en las dos dimensiones de x e y respectivamente. Cuando cada parámetro muestra una imagen, le pasa la cantidad de la imagen a ampliar (o reducir) en el eje de esta dirección. Si el valor X es 2, significa que todos los elementos en la imagen dibujada se volverán dos veces más ancha. Si el valor y es 0.5, la imagen dibujada se convertirá en la mitad de la altura.

// Dibuja el primer árbol en x = 130, y = 250

context.save ();

context.Translate (130, 250);

Drawtree (contexto);

context.restore (); </p> <p> // dibuja el segundo árbol en x = 260, y = 500

context.save ();

context.Translate (260, 500); </p> <p> // zoom en la altura y el ancho del segundo árbol al doble del original

context.scale (2, 2);

Drawtree (contexto);

context.restore ();

Gire la imagen

context.save ();

// Los parámetros del ángulo de rotación están en radianes como unidades

context.rotate (1.57);

context.DrawImage (myImage, 0, 0, 100, 100); </p> <p> context.restore ();

Un método de uso de la transformación

// Guardar el estado actual

context.save (); </p> <p> // El valor x aumenta a medida que aumenta el valor y. Con la ayuda de una transformación de tracción,

// puede crear un árbol inclinado utilizado como sombra

// Después de aplicar la transformación, todas las coordenadas se multiplican con la matriz

context.transform (1, 0,

-0.5, 1,

, 0); </p> <p> // En la dirección del eje y, cambia la altura de la sombra a 60%

context.scale (1, 0.6); </p> <p> // llena el tronco con una transparencia negra del 20%

context.fillstyle = 'rgba (0, 0, 0, 0.2)';

context.fillrect (-5, -50, 10, 50); </p> <p> // repinte el árbol con el efecto de sombra existente

createCanopypath (contexto);

context.fill (); </p> <p> // restaurar el estado de lienzo anterior

context.restore ();

context.FillText (Text, X, Y, MaxWidth): Contenido de texto de texto, x, y Especifica la posición de texto, MaxWidth es un parámetro opcional, limita la posición de texto.

context.StrokExtext (Text, X, Y, MaxWidth): Contenido de texto de texto, x, y Especifica la posición de texto, MaxWidth es un parámetro opcional, limita la posición de texto.

// dibujar texto en lienzo

context.save (); </p> <p> // El tamaño de la fuente es 60, la fuente es un impacto

context.font = "60px Impact"; </p> <p> // llena el color

context.fillstyle = '#996600';

//Centro

context.textalign = 'Center'; </p> <p> // dibujar texto

context.fillText ('¡Happy Trails!', 200, 60, 400);

context.restore ();

Las sombras se pueden controlar a través de varias propiedades de contexto global

// color negro, 20% de transparencia

context.shadowcolor = 'rgba (0, 0, 0, 0.2)'; </p> <p> // mover 15px a la derecha y 10px a la izquierda

context.shadowoffsetx = 15;

context.shadowoffsety = -10; </p> <p> // sombra ligeramente borrosa

context.shadowblur = 2;

context.getImagedata (SX, SY, SW, SH): SX, XY determina un punto, SW: Ancho, SH: Altura.

Esta función devuelve tres propiedades: ancho cuántos píxeles por altura de fila de la fila cuántos píxeles por columna

Datos Un montón de matrices que contienen los valores de RGBA (valores rojos, verdes, azules y transparencia) de cada píxel obtenido de lienzo.

context.putimagedata (iMagedata, DX, DY): permite a los desarrolladores pasar un conjunto de datos de imagen. DX, DY se usa para especificar el desplazamiento. Si se usa, la función saltará a la posición de lienzo especificada para actualizar

Muestra datos de píxeles entrantes.

Canvas.todataurl: los datos actualmente presentados en el lienzo se pueden obtener programáticamente. Los datos obtenidos se guardan en formato de texto, y el navegador puede analizarlos en una imagen.