Comentário: não vou tentar a tecnologia que a Microsoft não suporta muito. Quando a Microsoft diz que vai apoiar, eu vou tentar. Talvez eu esteja acostumado a seguir a rota da Microsoft, mas é muito estúpido pensar nisso.
MVC é uma coisa boa. Por que você não aprende quando entra no setor? Você tem que esperar até que o ASP.NET MVC seja lançado antes de aprendê -lo; Orm é uma coisa boa, por que você tem que esperar até que a EF saia antes de aprender; HTML5 é uma coisa boa, por que você tem que esperar até o IE9 sair antes de aprender? ......-Eu acho que devo me livrar desse mau hábito.
Não há mais bobagens.
Requisitos: imite a função de desenhar pontos de âncora para imagens no Dreamweaver e gerar valores de coordenação no código HTML.
Análise técnica: a intuição me diz que a tela HTML5 é competente.
Como nunca estive envolvido na tela em substância e só vi demos desenvolvidos por outras pessoas usando tela, tive que fazer o tutorial sobre a tela HTML5. Descubra o seguinte link:
Depois de ler o documento, escreva o código:
Análise de código:
1.1 html: use uma imagem como base e coloque -a nela para desenhar fotos
1.2 CSS: Pelo menos você precisa colocar a posição correta, e o local transparente deve ser transparente.
1.3 JavaScript: Mousedown, Mousemove, MouseUp
<div>
<img src = "http://www.vevb.com/uploads/allimg/130720/100222r603_0.jpg"/>
<Canvas>
<p> Algumas informações para dizer às pessoas cujo Broswer não suporta html5 </p>
</canvas>
</div>
Estudantes experientes podem saber que isso é destinado a ser uma tragédia quando olham para o código HTML5. Quando houver um elemento IMG sob a tela, a tela será opaca, não importa o quê. Esqueci se posso desenhar algo na tela, que não deve funcionar. Parece que esse elemento de tela tem uma limpeza e não está disposto a estar com outros elementos de baixo nível. Mesmo que eu queira me contentar com o segundo melhor, ele não funcionará como um elemento de fundo do Cantainer. Meu sentimento é que essa tela pode não ser transparente para outros elementos. Portanto, o código acima é realmente o código errado ...
Então, como podemos obter efeitos semelhantes às camadas no Photoshop? Isso é obter mais alguns elementos de tela, substituir o IMG acima por tela e desenhar o IMG nessa tela, para que a tela seja transparente à tela. Infelizmente ... o código é o seguinte:
<div>
<lVAs> </canvas>
<Canvas>
<p> Algumas informações para dizer às pessoas cujo Broswer não suporta html5 </p>
</canvas>
</div>
Bem, o HTML está pronto e o próximo passo é usar tela. Com a ajuda do JavaScript, essa tarefa é muito simples.
window.addeventListener ('load', function () {
// Obtenha o elemento Canvas.
var elem = document.getElementById ('bg');
if (! elem ||! elem.getContext) {
retornar;
}
// Obtenha o contexto 2D do Canvas.
var context = elem.getContext ('2d');
if (! Context ||! Context.Drawimage) {
retornar;
}
// Crie uma nova imagem.
var iMg = new Image ();
// Depois de carregar, desenhe a imagem na tela.
img.addeventListener ('load', function () {
// Resolução original: x, y.
context.Drawimage (isto, 0, 0);
// agora redimensione a imagem: x, y, w, h.
context.Drawimage (isto, 160, 0, 120, 70);
// Corte e redimensione a imagem: SX, SY, SW, SH, DX, DY, DW, DH.
context.Drawimage (isto, 8, 20, 140, 50, 0, 150, 350, 70);
}, false);
img.src = 'http://www.vevb.com/uploads/allimg/130720/100222r603_0.jpg';
}, false);
// Observe que o código obtido diretamente no documento é necessário para os eventos Opera e IE9 Onload; caso contrário, a imagem ficará em branco, é claro, esse não será o caso do Chrome.
Continua...
Endereço original