HTML5 Canvas
<canvas> gráficos personalizados etiqueta, como gráficos y otras imágenes, debe utilizar una secuencia de comandos para dibujar gráficos.
En el lienzo (Canvas) dibujar un rectángulo rojo, rectángulo gradiente de rectángulos de color, y algunos textos de color.
¿Cuál es la lona?
HTML5 <canvas> se utiliza para dibujar gráficos usando secuencias de comandos (normalmente JavaScript) para completar.
la etiqueta <canvas> es un contenedor gráfica, se debe utilizar una secuencia de comandos para dibujar gráficos.
Puede utilizar Canva dibujar trazados, cajas, círculos, los personajes y la adición de imágenes a través de una variedad de métodos.
Soporte para el navegador
Internet Explorer 9 o superior, Firefox, Opera, Chrome, Safari y apoyo elemento <canvas>.
Nota: Internet Explorer 8 y versiones anteriores del navegador IE no soporta elemento <canvas>.
Crear un lienzo (Canvas)
Una página de la lona es un rectángulo se dibuja a través del elemento <canvas>.
Nota: Por defecto, el elemento <canvas> no tiene borde y el contenido.
<Lienzo> Ejemplos simples son los siguientes:
Nota: La etiqueta normalmente necesita especificar un atributo id (la secuencia de comandos a menudo citado), atributos de tamaño, anchura y altura definen el lienzo.
Consejo: Puede utilizar múltiples <canvas> en una página HTML.
Está utilizando el atributo de estilo para agregar un borde:
Ejemplos
style="border:1px solid #000000;">
</canvas>
Trate »
El uso de JavaScript para dibujar gráficos
elemento canvas en sí no es un suministro eléctrico. Todo el trabajo debe ser elaborado en JavaScript hace internamente:
Ejemplos
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Trate »
ejemplos de análisis:
En primer lugar, encontrar el elemento <canvas>:
A continuación, cree el objeto de contexto:
getContext ( "2d") objeto es un objeto incorporado HTML5 tiene varios métodos para caminos de dibujo, cajas, círculos, los personajes y la adición de imágenes.
Las siguientes dos líneas de código para dibujar un rectángulo rojo:
ctx.fillRect(0,0,150,75);
Estableciendo la propiedad fillStyle puede ser un color CSS, degradado o un motivo. fillStyle ajuste predeterminado es # 000000 (negro).
fillRect (x, y, anchura,altura) método define un rectángulo relleno con el método actual.
coordenadas de lona
lienzo es una rejilla de dos dimensiones.
Parte superior de lona coordenadas esquina izquierda (0,0)
El método anterior tiene parámetros fillRect (0,0,150,75).
Esto significa: Dibujar un rectángulo 150x75 en el lienzo de la esquina superior izquierda (0,0).
Ejemplos de coordenadas
Como se muestra a continuación, coordenadas X e Y de la tela en el lienzo para colocar la pintura. El movimiento del rectángulo ratón, ubicación de la pantalla coordenadas.
Lona - Camino
En la línea de pintura de la lona, vamos a utilizar los dos métodos siguientes:
- moveTo(x, y) las coordenadas definir una línea que comienza
- lineTo(x, y) las coordenadas para definir el final de la línea
Dibujar una línea debemos utilizar los métodos de "tinta", como accidente cerebrovascular ().
Ejemplos
Definir comenzar coordenadas (0,0), y las coordenadas finales (200, 100) y luego usar el método de accidente cerebrovascular () para dibujar la línea:
JavaScript:
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Trate »
Dibujar un círculo en el lienzo, utilizaremos el siguiente método:
- arco (x, y, r, iniciar, detener)
De hecho, se utilizó el enfoque de "tinta" en la elaboración de un círculo, como un accidente cerebrovascular () o de relleno ().
Ejemplos
Utilice el método de arco () para dibujar un círculo:
JavaScript:
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Trate »
Lona - Texto
Utilice el lienzo para dibujar texto, propiedades y métodos importantes de la siguiente manera:
- fuente - definir la fuente
- fillText (texto, x, y)- representar el texto sólida sobre lienzo
- strokeText (texto, x, y)- dibujo sobre lienzo texto hueca
Utilice fillText ():
Ejemplos
Usar tipo de letra "Arial" prestación de un texto de alta 30px (sólido) en el lienzo:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Trate »
Utilice strokeText ():
Ejemplos
Usar tipo de letra "Arial" prestación de un texto de alta 30px (hueco) en la lona:
JavaScript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Trate »
Lona - gradiente
Los rellenos degradados pueden ser rectangulares, circulares, líneas, texto, etc., puede definir sus propias formas en diferentes colores.
Aquí hay dos modos distintos de configurar la lona Gradiente:
- createLinearGradient (x, y, x1,y1) - Crear un gradiente línea
- createRadialGradient (x, y, r,x1, y1, r1) - Crear un radial / ida y graded
Cuando usamos un objeto de gradiente, debe utilizar dos o más colores parada.
addColorStop () para especificar paradas de color, el uso de coordenadas para describir los parámetros que pueden ser 0-1.
Utilizando el valor de fillStyle o valor de gradiente strokeStyle degradado, y luego dibujar formas, como rectángulos, texto o una línea.
Utilice createLinearGradient ():
Ejemplos
Crear un gradiente lineal. Utilice rectángulo relleno degradado:
JavaScript:
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Trate »
Utilice createRadialGradient ():
Ejemplos
Crear un degradado radial / circular. Utilice rectángulo relleno degradado:
JavaScript:
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Trate »
Canvas - Imágenes
La imagen de uno sobre el lienzo, utilizando los métodos siguientes:
- drawImage(imagen, x, y)
Utilice una imagen:
Ejemplos
La imagen se coloca en un lienzo:
JavaScript:
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
Trate »
Manual de Referencia HTML Canvas
la propiedad completa de la etiqueta se puede referir manual de referencia de la lona.
El HTML <canvas> Tag
| Tag | 描述 |
|---|---|
| <canvas> | HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 |