<script type = "text/javaScript">
intentar
{
document.createElement ("Canvas"). getContext ("2d");
document.getElementById ("soporte"). innerhtml = "ok";
}
captura (e)
{
document.getElementById ("soporte"). InnerHtml = e.message;
}
</script>
Unirse al lienzo <Canvas id = diagonal estilo = borde: 1px azul sólido; ancho = 200 altura = 200/>// 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 ();
TransformarLos 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 ();
caminoLas 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);
Estilo de accidente cerebrovascularEl 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 ();
Estilo de relleno context.fillstyle = #339900; context.fill (); dibujar rectánguloAñademos troncos al árbol
context.fillstyle = '#663300'; context.fillrect (-5, -50, 10, 50); Curva de dibujocontext.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 ();
Insertar imagen en lienzoDebe 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:
// llenar con patrón de fondo como contexto de fondo. gradienteEl 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);
Imagen de fondo// 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.
| Método de mosaico | significado |
| repetir | (Predeterminado) La imagen se balanceará en dos direcciones |
| repetir-x | Mosaico plano horizontal |
| repetición | Mosaico plano vertical |
| sin repetición | La imagen solo se muestra una vez, no en azulejos |
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 ();
GirarGire 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 ();
textocontext.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 ();
sombraLas sombras se pueden controlar a través de varias propiedades de contexto global
| propiedad | valor | Observación |
| shadowcolor | Valores de color en cualquier CSS | La transparencia (alfa) se puede usar |
| ShadowOffsetx | Valor de píxel | El valor es positivo, mueve la sombra a la derecha; es negativo, mueve la sombra a la izquierda |
| Shadowoffsety | Valor de píxel | El valor es positivo, mueve la sombra hacia abajo; es negativo, mueve la sombra hacia arriba |
| bomba de sombra | Valor difuso gaussiano | Cuanto mayor es el valor, más borrosa son los bordes de las sombras |
// 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;
Datos de píxelescontext.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.