Comentário: No HTML5, acho que o mais importante é introduzir tela, para que possamos desenhar vários gráficos na web, e a tela é um desenho baseado em pixels. Canvas é um nó HTML equivalente a uma prancheta, devemos desenhar com JS
No HTML5, acho que o mais importante é introduzir tela, para que possamos desenhar vários gráficos na web. Isso dá às pessoas a sensação de serem um pouco embaçadas a esse respeito. Na web HTML5, também existem desenhos baseados em XML, como VML e SVG. A tela é um desenho baseado em pixels. A tela é um nó HTML equivalente a uma prancha de arte, e devemos desenhar JS.do seguinte modo:
<Canvas ID = MyCanvas Width = 600 Hight = 300> Seu navegador não suporta a definição </lvas>.
Podemos obter o objeto Canvas como var c = document.getElementById (myCanvas); Seu método de atributo JS deve ser listado da seguinte forma:
1: desenhe o objeto renderizado, c.getContext (2d), obtenha o objeto de desenho 2D. Não importa quantas vezes chamamos o objeto, o objeto será o mesmo objeto.
2: Método de desenho:
Clecrrect (esquerda, superior, largura, altura) limpa a área do retângulo definido,
Fillrect (esquerda, topo, largura, altura) desenha o retângulo e o enche com um estilo de enchimento.
FillText (texto, x, y) desenha texto;
A Strokerect (esquerda, superior, largura, altura) desenha o retângulo e desenha o limite com Strokestyle.
BeginPath (): Ligue o desenho do caminho e redefina o caminho para o estado inicial;
ClosePath (): Desenhe o caminho do caminho termina, ele desenhará um intervalo fechado e adicionará uma curva fechada da posição inicial à coordenada atual;
moveto (x, y): defina as coordenadas reais do desenho.
lineto (x, y); desenha uma linha reta da posição atual para x, y.
preenchimento (), stroke (), clipe (): o último contorno de preenchimento e limite que é acabado de desenho, área de clipe.
arco (): desenhe o arco, a posição central, o radiano de partida e o final do radian para especificar a posição e o tamanho do arco;
Rect (): caminho retangular;
drawImage (Imag IMG): desenhe Picses;
quadraticcurveto (): caminho de spline quadrático, parâmetro dois pontos de controle;
beziercurveto (): curva bezier, três pontos de controle de parâmetros;
CreateImagedata, getImagedata, putImagedata: são os dados do pixel em tela. Imagens é a largura do registro, altura e dados de dados, onde os dados são o registro de nosso pigmento como
Argb, portanto, o comprimento do tamanho da matriz é de largura*altura*4, e a ordem é RGBA, respectivamente. GetImagedata é obter os pixels de área retangular, e PutImagedata é definir os pixels da área retangular;
... e assim por diante!
3: Transformação de coordenada:
traduza (x, y): tradução, a origem se move para coordenadas (x, y);
Gire (a): transformação de rotação, ângulo de rotação de um grau;
escala (x, y): transformação de escala;
salvar (), RESTORE (): fornece e uma pilha, salvar e restaurar o estado de desenho, salvar empurra o estado de desenho atual para a pilha, restaura a pilha e restaura o estado de desenho;
... e assim por diante!
OK, é tarde demais. Anexou meu código de teste:
<html>
<head>
</head>
<Body>
<lévas> Seu navegador não o suporta </lvas>
<script type = "text/javascript">
var largura, altura, superior, esquerda;
largura = altura = 100;
top = esquerda = 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.STRAISTERECT (0,0, C.Width, C.Height);
var iMg = new Image ();
img.src = "1.gif";
var myInterval = null;
começar();
função refresh () {
cxt.clearrect (esquerda, superior, largura, altura);
if ((esquerda+x)> (maxwidth-width) || esquerda+x <0) {
x = -x;
}
if ((top+y)> (maxHeight-telha) || top+y <0) {
y = -y;
}
Esquerda = esquerda+x;
top = top+y;
cxt.Drawimage (IMG, esquerda, superior, largura, altura);
cxt.font = "20pt Songyi";
cxt.fillText ("Breaking Wolf", esquerda, top+25);
}
função start () {
if (myInterval == null) {
MyInterval = setInterval ("refresh ()", 100);
}
}
função stop () {
if (myInterval! = null) {
ClearInterval (MyInterval);
MyInterval = null;
}
}
função inrectangle (x, y, retx, rety, rwidth, rhight) {
return (x> = retx && x <= retx+rwidth) && (y> = rety && y <= rety+rheight)
}
c.onMouseOver = function (e) {
if (inrectangle (e.clientX, e.clienty, esquerda, superior, largura, altura)) {
parar();
}
c.onMouseOut = function (e) {
começar();
}
C.OnMousEmove = function (e) {
if (inrectangle (e.clientX, e.clienty, esquerda, superior, largura, altura)) {
if (myInterval! = null) {
parar();
}
}outro{
começar();
}
}
}
</script>
</body>
</html>