SVG et Canvas!!!

Le Remix

HTML5 - Le logo

SVG et Canvas : Table des matières

  1. SVG
  2. Canvas 2D (la base)
  3. Canvas 2D (un peu plus)

SVG dans le HTML


	<?xml version="1.0" standalone="no"?>
	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
		"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<g transform="translate(50, 0)">
		<g transform="rotate(45)">
			<rect width="50" height="50" style="fill:rgb(0,100,0);"/>
		</g>
	</g>
	</svg>
    			

L'élément canvas et l'API 2D


	<canvas id="myCanvas" width="400" height="120">
	</canvas>
	<script type="text/javascript">
		if (Modernizr.canvas) {
			var canvasCtx = document.getElementById("myCanvas").getContext("2d");
			canvasCtx.fillStyle = "rgb(0,100,0)";
			canvasCtx.translate(150, 50);
			canvasCtx.rotate(45 * Math.PI / 180);
			canvasCtx.fillRect(0,0,50,50);
		}
	</script>
				

Un peu plus avec Canvas

Un peu plus avec Canvas (2)



    if (Modernizr.canvas) {
        var canvasCtx = document.getElementById("myCanvas").getContext("2d");
        canvasCtx.save();
        canvasCtx.fillStyle = "rgb(0,100,0)";
        canvasCtx.translate(150, 25);
        canvasCtx.rotate(45 * Math.PI / 180);
        canvasCtx.fillRect(0,0,50,50);
        canvasCtx.restore();
        canvasCtx.fillStyle = "rgba(100,0,0, 0.5)";
        canvasCtx.translate(125, 0);
        canvasCtx.scale(0.75, 1);
        canvasCtx.fillRect(0,0,50,50);
        canvasCtx.save();
    }

              

Un peu plus avec Canvas (3)

Un peu plus avec Canvas (4)



    if (Modernizr.canvas) {
        var canvasCtx = document.getElementById("myCanvas3").getContext("2d");
        canvasCtx.fillStyle = "rgb(0,100,0)";
        canvasCtx.strokeStyle = "rgb(0,0,100)";
        canvasCtx.beginPath();
        canvasCtx.moveTo(150, 25);
        canvasCtx.lineTo(200, 0);
        canvasCtx.lineTo(250, 20);
        canvasCtx.stroke();
        canvasCtx.beginPath();
        canvasCtx.moveTo(100, 25);
        canvasCtx.lineTo(100, 100);
        canvasCtx.lineTo(50, 100);
        canvasCtx.fill();
        canvasCtx.beginPath();
        canvasCtx.arc(250,10,75, 0, 90/180*Math.PI, false);
        canvasCtx.fill();
        canvasCtx.beginPath();
        canvasCtx.moveTo(350, 25);
        canvasCtx.quadraticCurveTo(370, 5, 450, 100);
        canvasCtx.bezierCurveTo(370, 150, 110, 110, 250, 160);
        canvasCtx.stroke();
    }

              

Un peu plus avec Canvas (5)

Un peu plus avec Canvas (6)


    var imageForCanvas = new Image();
    imageForCanvas.src = "images/HTML5_Badge_128.png";
    imageForCanvas.onload = function() {
        if (Modernizr.canvas) {
            var canvasCtx = document.getElementById("myCanvas5").getContext("2d");
            canvasCtx.beginPath();
            canvasCtx.arc(60,60,60,0,Math.PI*2,true);
            canvasCtx.clip();
            canvasCtx.drawImage(imageForCanvas, 10,10);
            canvasCtx.font = "normal 14px sans-serif";
            canvasCtx.fillStyle = "black";
            canvasCtx.fillText("DU TEXTE", 60, 60);
        }
    };

Un peu plus avec Canvas (7)

Commentaires? Questions? Démos!

Merci!