Pourquoi utiliser <canvas> au lieu d'un bon vieux Javascript?

Toile besoins JavaScript pour faire quelque chose donc il n'est pas vraiment une question de choix ou avec "le bon vieux JavaScript" Voir l'exemple simple ici:

<canvas id='myCanvas' height='200' width='200'><canvas>

Vous pouvez ensuite utiliser code JS à tirer sur elle:

  var canvas = document.getElementById("myCanvas");
  if (canvas.getContext) {
    var context = canvas.getContext("2d");
    context.fillStyle = "rgb(255,0,0)";
    context.fillRect (10, 10, 50, 50);  
  }

Avant cette dans le pré-toile JS jours vous avez été forcé lorsque le dessin sur l'écran pour l'utiliser une fois rempli, un div pour faire les formes. Un simple rectangle ou d'un carré est facile, mais le dessin d'une ligne diagonale aurait besoin d'un tas de pixel divs et un cercle, même le pire. Il y a des bibliothèques qui font cela comme Walter Zorn bibliothèque, ce qui est assez ancien et bien connu. Sauf si vous êtes l'appui d'un ancien navigateur, cela ne semble pas un moyen raisonnable d'y aller.

Que les gens sont en citant vous pouvez exécuter <canvas> dans la plupart des navigateurs enregistrer Internet Explorer qui vous avez besoin d'une traduction de la bibliothèque comme Explorer La Toile Ce sera de traduire la toile de code pour IE native VML. Cependant, ce est quelque peu problématique avec quoi que ce soit de toute la complexité de l'esp. étant donné que vous compter sur IE slowish JS mise en œuvre pour faire la traduction.

Autres graphiques vectoriels alternatives sont actuellement détesté (soupir) Flash, c'est à dire de la VML codé directement à et SVG si le navigateur prend en charge. Il y a des rumeurs que IE9 va avoir SVG qui est un développement intéressant.

Ce qui est curieux à propos de cette dents nashing sur la Toile par rapport à d'autres choses (récemment Flash bien sûr) est l'absence de réel débat quant à son application pratique défis. La toile est une technologie vraiment cool, mais il a 3 principales préoccupations et défis (pas nécessairement dans l'ordre)

1. Son texte support est très
   newish afin d'obtenir une police sur un
   la toile ne fonctionne que dans le dernier
   des trucs (dans d'autres cas, vous avez besoin
   HTML/CSS superpositions) ou méchant hacks pour
   dessiner la lettre formulaires sur le
   toile.

2. L'interactivité est un hack et demi.
   Si vous voulez faire une toile dessin
   cliquable, vous êtes obligé d'utiliser un
   superposition de l'image des cartes ou des balises div ou
   faire quelques noix de pixel de la carte de capture
   événements et découvrir ce que les pixels
   ils ont frappé. Une toile de l'image est un
   rendue peu la carte et vraiment pas
   destiné à être en interaction avec combien d'
   les gens veulent. Google l'année dernière
   I/O conférence un peu de danses
   autour de cette question montre:
   http://www.youtube.com/watch?v=AusOPz8Ww80#t=48m54s&feature=player_embedded
   Le mode immédiat API signifie pas
   "la cueillette" - "toile ne poussent pas que
   la capacité de" Leur mention de SVG étant
   mieux saute au-dessus de la performance et
   compat craintes
   la technologie, bref, c'est un aveu
   et de la non-réponse de la solution.

3. Aucun natif IE soutien. Désolé
   que la traduction de la bibliothèque ne coupe pas la performance sage
   il pour quelque chose de significatif, et
   clairement c'est à dire est toujours un navigateur vigueur
   si vous l'aimez ou pas.

Toutefois, si vous avez à choisir un non-plugin de dessin basé sur la technologie, toile de même avec le IE compat bibliothèque est clairement mieux que l'ancien rempli de divs, sauf si vous avez un besoin d'antique prise en charge du navigateur.

<canvas> est une surface de dessin, il est donc utile lorsque vous voulez dessiner vos propres formes et autres joyeusetés.

En tant que tel, il n'est pas strictement “au lieu de” JavaScript — JavaScript pour dessiner des trucs sur un <canvas> tag. Vous ne pouvez pas vraiment dessiner sur une page HTML à l'aide de JavaScript, au lieu de manipuler des éléments du DOM — mais c'est plus souvent utile de dessiner, comme votre question le reconnaît.

Personnellement, je ne peux pas penser à quelque chose de pire que d'avoir à écrire un tas de code pour dessiner, par exemple, un cercle sur une page web (je préfère utiliser le logiciel d'interface graphique pour créer un fichier image), mais j'imagine que pour les jeux et les graphiques alors que le niveau de contrôle est utile. (Vous pouvez extraire des fichiers d'image et de les avoir rendus sur <canvas>, de sorte qu'il n'est pas comme si que vous auriez à tout dessiner.)

Il y a un semblable, ce-que-la-toile-fait-pour la question ici:

• Quelles sont insolites et créatifs usages du html5 canvas

Peut-être des logos de la société pourrait être tiré sur elle? Un peu de code JavaScript peut être plus rapide à télécharger qu'un fichier image.