Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

Елемент canvas

Елементът <canvas> се използва за чертане на графики директно в уеб страницата с използването на скрипт, обикновено JavaScript. Той представлява само контейнер за графиките, като за да се чертаят графики трябва да се използва скрипт. Елементът canvas представлява пространството в което може да се чертае, зададено с атрибути височина (height ) и широчина (width ). Този елемент използва няколко метода за чертане - прави, правоъгълници, окръжности, символи и добавяне на изображения.

Създаване на елемент canvas

Този елемент се определя с тага <canvas>. Задават се параметрите id, width и height.

	<canvas id="myCanvas" width="200" height="100"></canvas>

Елементът <canvas> не може да чертае сам. Всички чертежи трябва да су асъществят с JavaScript. В програмата по-долу се изчертава червен правоъгълник в пространство, което е определено с елемента <canvas> :

<!DOCTYPE html>
<html>
<body>
	<canvas id="sampleCanvas" width="200" height="100" style="border:2px solid #183756;">
		Браузърът не поддържа елемента canvas.
	</canvas>
	<script type="text/javascript">
             Изчертаване на плътен четириъгълник
	     var c=document.getElementById("sampleCanvas");
	     var ctx=c.getContext("2d");
	     ctx.fillStyle="#C20001";
	     ctx.fillRect(20,20,160,60);
             Изчертаване на четириъгълник с прави линии
	     var canvas=document.getElementById("sampleCanvas");
	     var ctx=canvas.getContext("2d");
	     ctx.strokeStyle="#116B00";
	     ctx.strokeRect(18,18,164,64);
             Изчертаване на прави линии с дебелина 10 px и закръглени краища и връзка
	     var c=document.getElementById("sampleCanvas");
	     var ctx=c.getContext("2d");
	     ctx.lineWidth=10;
	     ctx.lineCap="round";
	     ctx.lineJoin="round";
	     ctx.strokeStyle="#4AA9C4";
	     ctx.moveTo(20,20);
	     ctx.lineTo(180,50);
	     ctx.lineTo(20,80);
	     ctx.stroke();
             Градиент с два цвята
	     var c=document.getElementById("sampleCanvas");
	     var ctx=c.getContext("2d");
	     var grd=ctx.createLinearGradient(0,0,150,50);
	     grd.addColorStop(0,"red");
	     grd.addColorStop(1,"#00FF00");
	     ctx.fillStyle=grd;
	     ctx.fillRect(30,5,140,10);
             Изчертаване на окръжност със зададени координати на центъра и радиус, с добавена сянка, блър и офсет
	     var c=document.getElementById("sampleCanvas");
	     var ctx=c.getContext("2d");
	     ctx.fillStyle="#FFFFFF";
	     ctx.beginPath();
	     ctx.arc(40,50,15,0,Math.PI*2,true);
	     ctx.closePath();
	     ctx.shadowColor="black";
	     ctx.shadowBlur=10;
	     ctx.shadowOffsetX=5;
	     По същият начин може да се използва и shadowOffsetY
	     ctx.fill();             
	</script>
</body>
</html>
Браузърът не поддържа елемента canvas.