Comentario: No intentaré la tecnología que Microsoft no admite mucho. Cuando Microsoft dice que lo admitirá, lo intentaré. Tal vez estoy acostumbrado a seguir la ruta de Microsoft, pero es bastante estúpido pensar en ello.
MVC es algo bueno. ¿Por qué no lo aprendes cuando ingresas a la industria? Tienes que esperar hasta que salga ASP.NET MVC antes de aprenderlo; Orm es algo bueno, ¿por qué tienes que esperar hasta que salga EF antes de aprenderlo? HTML5 es algo bueno, ¿por qué tienes que esperar hasta que salga IE9 antes de aprenderlo? ......-Deo que debería deshacerme de este mal hábito.
No más tonterías.
Requisitos: imite la función de dibujar puntos de anclaje para imágenes en DreamWeaver y generar valores de coordinas en el código HTML.
Análisis técnico: la intuición me dice que el lienzo HTML5 es competente.
Como nunca he estado involucrado en el lienzo en sustancia y solo he visto demostraciones desarrolladas por otros que usan lienzo, tuve que poner el tutorial sobre el lienzo HTML5. Descubra el siguiente enlace:
Después de leer el documento, escriba el código:
Análisis de código:
1.1 html: use una imagen como base y colóquela en ella para dibujar imágenes
1.2 CSS: al menos debe colocar la posición correcta, y el lugar transparente debe ser transparente.
1.3 JavaScript: MouseDown, MouseMove, MouseUp
<div>
<img src = "http://www.vevb.com/uploads/allimg/130720/10022r603_0.jpg"/>>
<Canvas>
<p> Alguna información para decirle a las personas cuyo Broswer no es compatible con HTML5 </p>
</able>
</div>
Los estudiantes experimentados pueden saber que esto está destinado a ser una tragedia cuando miran el código HTML5. Cuando hay un elemento IMG debajo del lienzo, el lienzo será opaco sin importar qué. Olvidé si puedo dibujar algo en el lienzo, que no debería funcionar. Parece que este elemento de lienzo tiene una limpieza y no está dispuesto a estar con otros elementos de bajo nivel. Incluso si quiero conformarme con el segundo mejor, no funcionará como un elemento de fondo del Cantainer. Mi sensación es que este lienzo puede no ser transparente a otros elementos. Entonces, el código anterior es en realidad el código incorrecto ...
Entonces, ¿cómo podemos lograr efectos similares a las capas en Photoshop? Eso es obtener algunos elementos de lona más, reemplazar el IMG anterior con lienzo y luego dibujar el IMG en este lienzo, para que el lienzo sea transparente para el lienzo. Por desgracia ... el código es el siguiente:
<div>
<Canvas> </Canvas>
<Canvas>
<p> Alguna información para decirle a las personas cuyo Broswer no es compatible con HTML5 </p>
</able>
</div>
Bueno, el HTML está hecho, y el siguiente paso es aprovechar el lienzo. Con la ayuda de JavaScript, esta tarea es muy simple.
Window.adDeventListener ('load', function () {
// Obtener el elemento de lona.
var elem = document.getElementById ('bg');
if (! Elem ||! Elem.getContext) {
devolver;
}
// Obtener el contexto de lienzo 2D.
VAR context = elem.getContext ('2d');
if (! context ||! context.drawimage) {
devolver;
}
// Crear una nueva imagen.
var img = nueva imagen ();
// Una vez que se carga, dibuje la imagen en el lienzo.
img.addeventListener ('load', function () {
// Resolución original: x, y.
context.DrawImage (this, 0, 0);
// ahora cambia el tamaño de la imagen: x, y, w, h.
context.drawimage (this, 160, 0, 120, 70);
// recorte y cambia el tamaño de la imagen: SX, SY, SW, SH, DX, DY, DW, DH.
context.drawimage (this, 8, 20, 140, 50, 0, 150, 350, 70);
}, FALSO);
img.src = 'http://www.vevb.com/uploads/allimg/130720/10022r603_0.jpg';
}, FALSO);
// Tenga en cuenta que el código tomado directamente en el documento es necesario para los eventos de Opera e IE9 Onload, de lo contrario, la imagen estará en blanco, por supuesto, este no será el caso en Chrome.
Continuará...
Dirección original