Comentario: En HTML5, creo que lo más importante es introducir lienzos, para que podamos dibujar varios gráficos en la web, y el lienzo es un dibujo basado en píxeles. El lienzo es un nodo HTML equivalente a una tabla de arte, debemos dibujar con JS
En HTML5, creo que lo más importante es introducir lienzos, para que podamos dibujar varios gráficos en la web. Le da a las personas la sensación de estar un poco borrosa a este respecto. En la web HTML5, también hay dibujos basados en XML como VML y SVG. Canvas es un dibujo a base de píxeles. El lienzo es un nodo HTML equivalente a una tabla de arte, y debemos dibujar en JS.como sigue:
<Canvas ID = MyCanvas Width = 600 Height = 300> Su navegador no admite la definición </ Canvas>.
Podemos obtener el objeto Canvas como var c = document.getElementById (mycanvas); Su método de atributo JS debe aparecer de la siguiente manera:
1: Dibuja el objeto renderizado, c.getContext (2d), obtenga el objeto de dibujo 2D. No importa cuántas veces llamemos al objeto, el objeto será el mismo objeto.
2: Método de dibujo:
Clecrrrect (izquierda, superior, ancho, altura) borra el área del rectángulo definido,
Fillrect (izquierda, superior, ancho, altura) dibuja el rectángulo y lo llena con Fillstyle.
Filltext (texto, x, y) dibuja texto;
Strokerect (izquierda, superior, ancho, altura) dibuja el rectángulo y dibuja el límite con Strokestyle.
BeginPath (): Encienda el dibujo de la ruta y restablezca la ruta al estado inicial;
ClosePath (): Dibuja los extremos de la ruta, dibujará un intervalo cerrado y agregará una curva cerrada desde la posición inicial a la coordenada actual;
Moveto (x, y): establezca las coordenadas reales del dibujo.
lineto (x, y); dibuja una línea recta desde la posición actual a x, y.
relleno (), trazo (), clip (): el último relleno y contorno límite que está terminado de dibujar, área de clip.
ARC (): Dibuje el arco, la posición central, el comienzo de Radian y la finalización de Radian para especificar la posición y el tamaño del arco;
rect (): ruta rectangular;
Drawimage (Imag img): dibujar imágenes;
QuadraticCurVeto (): ruta de spline cuadrática, parámetro dos puntos de control;
Beziercurveto (): curva Bezier, tres puntos de control de parámetros;
CreateImagedata, GetImagedata, Putimagedata: son los datos de píxeles en lienzo. IMagedata es el ancho de registro, la altura y los datos de los datos, donde los datos son el registro de nuestro pigmento como
Argb, por lo que la longitud del tamaño de la matriz es ancho*altura*4, y el orden es RGBA respectivamente. getImagedata es para obtener los píxeles del área rectangular, y Putimagedata es establecer los píxeles del área rectangular;
… ¡etcétera!
3: Transformación de coordenadas:
traducir (x, y): traducción, el origen se mueve a coordenadas (x, y);
Rotar (a): transformación de rotación, ángulo de rotación de un grado;
Escala (x, y): transformación de escala;
guardar (), restaurar (): proporciona y una pila, guardar y restaurar el estado de dibujo, Save empuja el estado de dibujo actual en la pila, restaura la pila y restaura el estado de dibujo;
… ¡etcétera!
Ok, es demasiado tarde. Adjunto mi código de prueba:
<html>
<Evista>
</ablo>
<Body>
<Vasvas> Su navegador no lo admite </levas>
<script type = "text/javaScript">
ancho de var, altura, arriba, izquierda;
ancho = altura = 100;
superior = izquierda = 5;
var x = 10;
var y = 10;
var c = document.getElementById ("mycanvas");
var maxwidth = C.Width-5;
var maxHeight = C.Height-5;
var cxt = c.getContext ("2d");
cxt.strokestyle = "#00f";
cxt.Strokerect (0,0, C.Width, C.Height);
var img = nueva imagen ();
img.src = "1.gif";
var myInterval = null;
comenzar();
función refresh () {
cxt.clearrect (izquierda, superior, ancho, altura);
if ((izquierda+x)> (maxwidth-width) || izquierda+x <0) {
x = -x;
}
if ((top+y)> (maxheight-height) || top+y <0) {
y = -y;
}
izquierda = izquierda+x;
superior = top+y;
cxt.drawimage (img, izquierda, arriba, ancho, altura);
cxt.font = "20pt Songyi";
cxt.FillText ("Breaking Wolf", izquierda, superior+25);
}
función start () {
if (myInterval == null) {
MyInterval = setInterval ("refresh ()", 100);
}
}
function stop () {
if (myInterval! = null) {
ClearInterval (myInterval);
MyInterval = null;
}
}
function inrectangle (x, y, rectx, recty, rwidth, rheight) {
return (x> = rectx && x <= rectx+rwidth) && (y> = recty && y <= recty+rheight)
}
c.onmouseover = function (e) {
if (inrectangle (e.clientx, e.clienty, izquierda, arriba, ancho, altura)) {
detener();
}
c.onmouseout = function (e) {
comenzar();
}
c.onmouseMove = function (e) {
if (inrectangle (e.clientx, e.clienty, izquierda, arriba, ancho, altura)) {
if (myInterval! = null) {
detener();
}
}demás{
comenzar();
}
}
}
</script>
</body>
</html>