Картинка "Инь-Ян" программно

Возник маленький вопрос, как сгенерировать классический символ "Инь-Ян" программно, можно даже без хрени :)

Хотите развернуть "рыбок" - меняйте местами чёрное и белое. Как видно из исходника, всё делается просто двумя полукругами и четырьмя окружностями:

<div id="div" align="center">
<canvas id="yingyangcanvas" style="border: 0px">
<p>Похоже, ваш браузер не поддерживает HTML5 и тег &lt;canvasas&gt;.</p>
<p>Попробуйте использовать один из следующих браузеров:</p>
<ul>
 <li>Chrome (&gt;4.0)</li>
 <li>Opera (&gt;9.0)</li>
 <li>Opera Mobile (&gt;10.0)</li>
 <li>Firefox (&gt;2.0)</li>
 <li>Safari (&gt;3.1)</li>
 <li>iOS Safari (&gt;3.2)</li>
 <li>Android Browser (&gt;2.1)</li>
 <li>Internet Explorer (&gt;=9.0)</li>
</ul>
</canvas>
</div>

<script type="application/x-javascript">
var c = document.getElementById('yingyangcanvas');
var a = c.getContext("2d");
var W=c.width=200; //ширина
var H=c.height=W; //высота=ширина
var R=W/2; //радиус
a.fillStyle="rgba(0,0,0,0.4)"; //фон
a.fillRect(0,0,W,H);

function Arc(posX,posY,radius,startAngle,endAngle,color) {
 a.beginPath();
 a.arc(posX,posY,radius,startAngle,endAngle);
 a.fillStyle=color;
 a.fill();
};

Arc(W/2, H/2,     R,     0.5*Math.PI, 1.5*Math.PI, "white"); //Большие полуокружности
Arc(W/2, H/2,     R,     1.5*Math.PI, 0.5*Math.PI, "black");
Arc(W/2, H/2-R/2, R/2,   0,           2*Math.PI,   "white"); //Меньшие окружности
Arc(W/2, H/2+R/2, R/2,   0,           2*Math.PI,   "black"); 
Arc(W/2, H/2-R/2, R/6,   0,           2*Math.PI,   "black"); //Маленькие кружки
Arc(W/2, H/2+R/2, R/6,   0,           2*Math.PI,   "white"); 
</script>
<noscript>
<p>Для работы приложения нужен включённый в браузере Javascript!</p>
</noscript>

22.06.2016, 18:53 [5462 просмотра]