Codul Cercului de Prieteni

Your browser does not support the HTML5 canvas tag.

Logoul Ubuntu, mai cunoscut ca și Cercul de prieteni (Circle of Friends), este un foarte frumoas element grafic cât și geometric. Desigur că poate fi desenat și de mână, dacă aveți talentul, dar care este matematica secretă din spatele acestuia? Negăsind nici o bucată de cod care să îl genereze grafic, am decis să îl scriu eu. Deci iată cum puteți desena logoul Ubuntu folosind HTML5 canvas. Am ales html canvas pentru că poate fi postat cu ușurință pe web. Logoul este făcut să umple canvasul, așa că îi puteți modifica dimensiunea modificând marimea canvasului. Sunteți liberi să modificați codul.

<a href="http://www.ubunTumult.blogspot.com">

<canvas id="http://www.ubunTumult.blogspot.com" width="200" height="200" style="border:0px solid #ffffff;">

Your browser does not support the HTML5 canvas tag.

</canvas>

</a>

<script>

var c=document.getElementById("http://www.ubunTumult.blogspot.com");

var ubunTumult=c.getContext("2d");

var centerx=c.width/2;

var centery=c.height/2;

var radius=Math.min(centerx,centery);

ubunTumult.beginPath();

ubunTumult.arc(centerx,centery,radius,0,2*Math.PI);

ubunTumult.fillStyle="#dd4814";

ubunTumult.fill();

ubunTumult.fillStyle="#ffffff";

ubunTumult.beginPath();

ubunTumult.arc(centerx,centery,0.58*radius,7.5/360*Math.PI,90.9/360*Math.PI);

ubunTumult.arc(centerx+0.68/2*radius,centery+0.68/2*Math.sqrt(3)*radius,0.188*radius,290/180*Math.PI,190/180*Math.PI,1);

ubunTumult.arc(centerx,centery,0.58*radius,149.1/360*Math.PI,232.5/360*Math.PI);

ubunTumult.arc(centerx,centery,0.39*radius,115/180*Math.PI,5/180*Math.PI,1);

ubunTumult.fill();

ubunTumult.beginPath();

ubunTumult.arc(centerx+0.68*radius/2,centery+0.68/2*Math.sqrt(3)*radius,0.1334*radius,0,2*Math.PI);

ubunTumult.fill();

ubunTumult.beginPath();

ubunTumult.arc(centerx,centery,0.58*radius,247.5/360*Math.PI,330.9/360*Math.PI);

ubunTumult.arc(centerx-0.68*radius,centery,0.188*radius,50/180*Math.PI,310/180*Math.PI,1);

ubunTumult.arc(centerx,centery,0.58*radius,389.1/360*Math.PI,472.5/360*Math.PI);

ubunTumult.arc(centerx,centery,0.39*radius,235/180*Math.PI,125/180*Math.PI,1);

ubunTumult.fill();

ubunTumult.beginPath();

ubunTumult.arc(centerx-0.68*radius,centery,0.1334*radius,0,2*Math.PI);

ubunTumult.fill();

ubunTumult.beginPath();

ubunTumult.arc(centerx,centery,0.58*radius,487.5/360*Math.PI,570.9/360*Math.PI);

ubunTumult.arc(centerx+0.68/2*radius,centery-0.68/2*Math.sqrt(3)*radius,0.188*radius,170/180*Math.PI,70/180*Math.PI,1);

ubunTumult.arc(centerx,centery,0.58*radius,629.1/360*Math.PI,712.5/360*Math.PI);

ubunTumult.arc(centerx,centery,0.39*radius,355/180*Math.PI,245/180*Math.PI,1);

ubunTumult.fill();

ubunTumult.beginPath();

ubunTumult.arc(centerx+0.68*radius/2,centery-0.68/2*Math.sqrt(3)*radius,0.1334*radius,0,2*Math.PI);

ubunTumult.fill();

</script>