Test du Canvas HTML 5 : Création d'une petite application style paint
samedi 12 novembre 2011
Voici un petit bout de code HTML 5 + Javascript pour tester les fonctionnalités
des Canvas. J'essaye ici de faire un p'tit editeur d'image en ligne style photoshop
en beaucoup beaucoup plus simple.
Cet exemple utilise le système de dessin de chemins (context.beginPath
) pour
dessiner des pixels de couleurs sur le canvas. Cet exemple aborde aussi l'export d'un canvas vers un
format bitmap (html5 canvas to png
). Enfin, cet exemple fonctionne comme un plugin jQuery,
et présente un peu le système d'événements qu’il convient d’adopter pour ce type de projet.
- Black
- Red
- Blue
- White
- Green
- Orange
Voici le code HTML + CSS :
<style type="text/css"> #drawarea { height: 500px; with: auto; border: 6px solid #ddd; } #drawarea canvas { cursor: crosshair; } ul.sketchdiv-colors li[color] { list-style-type: none; width: 20px; height: 20px; display: inline-block; overflow: hidden; border: 2px solid #eee; -moz-border-radius: 10px; border-radius: 10px; text-indent: 50px; cursor: pointer; } ul.sketchdiv-colors li[color]:hover { border-color: #ccc; } ul.sketchdiv-colors li[color]:active { border-color: #666; } ul.sketchdiv-colors li[color].selected { border-color: red; } ul.sketchdiv-colors [color=black] { background-color: black; } ul.sketchdiv-colors [color=red] { background-color: red; } ul.sketchdiv-colors [color=blue] { background-color: blue; } ul.sketchdiv-colors [color=white] { background-color: white; } ul.sketchdiv-colors [color=green] { background-color: green; } ul.sketchdiv-colors [color=orange] { background-color: orange; } </style> <ul class="sketchdiv-colors"> <li color="black">Black</li> <li color="red">Red</li> <li color="blue">Blue</li> <li color="white">White</li> <li color="green">Green</li> <li color="orange">Orange</li> </ul> <div id="drawarea" class="bg-transparent"></div> <input type="button" class="sketchdiv-reset" value="Clean" /> <input type="button" class="sketchdiv-export-png" value="Save as PNG" />
Et le code Javascript :
$.fn.SketchDiv = function () { $(this).each(function () { // Create the canvas var canvas = document.createElement('canvas'); canvas.setAttribute('width', $(this).width()); canvas.setAttribute('height', $(this).height()); // Append the canvas to the container this.appendChild(canvas); // Get drawing context if (typeof G_vmlCanvasManager != 'undefined') { canvas = G_vmlCanvasManager.initElement(canvas); } var context = canvas.getContext('2d'); // Initial config var color = 'black'; // Color controls $('ul.sketchdiv-colors [color]') .click(function () { var t = $(this); $('ul.sketchdiv-colors [color]', t.parent().parent()).removeClass('selected'); t.addClass('selected'); color = t.attr('color'); }); $('ul.sketchdiv-colors [color='+color+']').addClass('selected'); // Reset controls $('.sketchdiv-reset').click(function () { context.fillStyle = '#fff'; context.fillRect(0, 0, canvas.width, canvas.height); canvas.width = canvas.width; }); // Export controls $('.sketchdiv-export-png').click(function () { //var imgdata = canvas.getImageData(0, 0, canvas.width, canvas.height); var img = canvas.toDataURL('image/png'); $(this).parent().append('<img class="newimg" src="'+img+'" />'); }); // Events var paint = false; $(canvas) .mousedown(function (e) { paint = true; context.beginPath(); context.strokeStyle = color; context.lineWidth = 2; context.moveTo( e.pageX - this.offsetLeft, e.pageY - this.offsetTop ); }) .mousemove(function (e) { if (paint == true) { context.lineTo( e.pageX - this.offsetLeft, e.pageY - this.offsetTop ); context.stroke(); $('#log').prepend('Draw at '+(e.pageX - this.offsetLeft) +'x'+(e.pageY - this.offsetTop)+'<br>'); } }) .mouseup(function() { paint = false; context.closePath(); }) .mouseleave(function(){ paint = false; context.closePath(); }); }); };