Transformacja tekstu (HTML5 canvas)

Transformacja tekstu

Tworzymy smoczą pieczęć 🙂

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	var image = new Image();
	image.src = "images/samsmok.png";
	ctx.fillStyle="#238E3E";
	ctx.font="bold 21px 'Courier New'";
	ctx.translate(150,150);
	ctx.rotate(-Math.PI/22.0);
	ctx.translate(-150,-150);
	image.onload = function() {
		ctx.drawImage(image, 85, 85, 120, 130);
	};
	var x=140;
	var y=250;
	var s= "Rok Smoka 23 stycznia 2012 - 9 lutego 2013";
	for(var i=0; i<s.length;i++){
		ctx.fillText(s.substring(i,i+1),x,y);
		ctx.translate(150,150);
		ctx.rotate(-Math.PI/22.0);
		ctx.translate(-150,-150);
	}