dessin forme personnalisée en toile html5

Question

Quelqu'un peut-il me aider à s'il vous plaît dessiner cette forme en toile?

Toute aide est appréciée!

Answer 1

Vous pouvez quadraticCurveTo (https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes)

Voici un exemple: http://jsfiddle.net/V9sVY/

Answer 2

Pour tirer toute utilisation de forme personnalisée http://canvimation.github.com/ ce site pour dessiner directement la forme et de l'exporter comme une toile. L'affichage de la source de la page exportée vous montrera également le script de toile pour l'obtenir.

Pour la forme ci-dessus, modifiez les paramètres de la grille sur Grille et affichez-la pour vous assurer de dessiner une ligne droite. Choisissez la forme de formulaire libre, cliquez pour commencer une ligne puis double-cliquez à la fin de la ligne. Faites glisser les points de contrôle rouges pour former la forme requise. Les points de contrôle ne se verrouillent pas sur la grille mais peuvent vous aider à déterminer où les placer.

Voici une possibilité obtenue en faisant cela.

  ctx.beginPath(); 
      ctx.moveTo(167,196); 
      ctx.bezierCurveTo(217,98,418,99,467,196); 
      ctx.bezierCurveTo(414,296,218,295,167,196); 
      ctx.closePath(); 
      ctx.stroke();