Test du Canvas HTML 5 : Création d'une petite application style paint

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();
			});

	});
};

About the Author

Ted Marklor est un web designer, un web developer et un génie de la nature. Transcendant le web depuis bientôt 15 ans, Ted est une source d’inspiration et de conseil pour toute une génération de jeunes programmeurs. Le Web 2.0, c’est lui. Dans la vie, il aime aussi faire des avions en papier, s’inventer des pseudonymes et une vie de winner, et surtout parler de lui à la troisième personne. Ça se fait en ce moment sur les blogs…


Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.