html5, essayez d'abord le couteau sous IE9 _html5, compétences du didacticiel

MVC est une bonne chose, pourquoi ne l'apprenez-vous pas lorsque vous entrez dans l'industrie ? Vous devez attendre la sortie d'asp.net MVC avant de l'apprendre ; ORM est une bonne chose, pourquoi devez-vous attendre qu'EF soit disponible ? sort pour l'apprendre ? HTML5 est une bonne chose Pourquoi devez-vous attendre la sortie d'IE9 pour l'apprendre ? ...

——Je pense que je devrais me débarrasser de cette mauvaise habitude.

Fini les bêtises.

Exigences : imiter la fonction de dessin de points d'ancrage pour les images dans Dreamweaver et générer la valeur des coordonnées dans le code HTML.

Analyse technique : L'intuition me dit que le canevas html5 peut faire le travail.

Comme je n'ai jamais eu de contact substantiel avec Canvas et que je n'ai vu que des démos développées par d'autres utilisant Canvas, je n'ai pas eu d'autre choix que de jeter un œil au tutoriel Canvas html5. J'ai trouvé le lien suivant : http://kb.operachina.com/node/190

Écrivez le code après avoir lu le document :

Analyse du code :

1.1 html : Utiliser une image comme arrière-plan, et mettre la toile dessus pour dessiner

1.2 css : Vous devez au moins la placer dans la bonne position et rendre les endroits transparents transparents

1.3 javascript : les événements de souris doivent répondre à trois : mousedown, mousemove, mouseup

Copier le code

Le code est le suivant :

quelques informations à dire aux personnes dont le navigateur ne prend pas en charge html5

Les étudiants expérimentés savent peut-être que cela est destiné être une tragédie dès qu'ils regardent ce code html5. Lorsque l'élément est sous le canevas, le canevas est de toute façon opaque. Si vous oubliez si vous pouvez dessiner quelque chose sur le canevas, cela ne fonctionnera probablement pas. Il semble que cet élément de canevas ait une « propreté » et ne veuille pas rejoindre les rangs des autres éléments de bas niveau. Même si je veux me contenter de la meilleure solution, cela ne fonctionnera pas si elle apparaît comme élément d'arrière-plan du conteneur. Mon sentiment est que cette toile n’est peut-être pas transparente pour d’autres éléments. Donc le code ci-dessus est en fait un mauvais code...

Alors, comment pouvons-nous obtenir un effet similaire aux calques de Photoshop ? Il s'agit de créer quelques éléments de canevas supplémentaires, de remplacer l'img ci-dessus par canevas, puis de dessiner l'img sur ce canevas, de sorte que le canevas soit transparent pour le canevas. Hey... le code est le suivant :

Copiez le code Le code est le suivant :

="drewpanel" width=" 390" height="560">

quelques informations à dire aux personnes dont le navigateur ne prend pas en charge html5

>

Maintenant que le HTML est terminé, l'étape suivante consiste à dessiner sur le canevas. Avec l'aide de javascript, cette tâche est très simple.

Copier le code

Le code est le suivant : window.addEventListener ('load ', function () {

// Récupère l'élément canevas.

var elem = document.getElementById('bg');

if (!elem || !elem.getContext) {
return ;
}
// Récupère le contexte 2D du canevas
var context = elem.getContext('2d');
if (!context || !context.drawImage) {
return ;
}
// Créez une nouvelle image
var img = new Image();
// Une fois chargée, dessinez l'image sur le canevas
img.addEventListener. ('load', function () {
// Résolution originale : x, y.
context.drawImage(this, 0, 0);
// Maintenant, redimensionnez l'image : x, y, w , h.
context.drawImage(this, 160, 0, 120, 70);
// Recadrer et redimensionner l'image : sx, sy, sw, sh, dx, dy, dw, dh context. drawImage(this, 8, 20, 140, 50, 0, 150, 350, 70);
},
img.src = 'http://www.sh1800.net/); NavPic/20100917 .jpg';
}, false);
//Le code extrait directement du document. Veuillez noter qu'il est nécessaire pour les événements de chargement d'opéra et d'IE9, sinon l'image sera vide. , ce ne sera pas sous Chrome. Par ici


A suivre....
Adresse originale http://www.cnblogs.com/ice6/archive/2010/09/18. /1830020.html