Javascript: рисуем смайлик на канве

Всё, что мы сегодня успели нарисовать в свободную минуту - вот этот классический жёлто-чёрный смайлик на Javascript :)

Как и радуга, он просто увеличится или уменьшится при изменении размеров в теге <canvas>. Ориентируется на меньший из линейных размеров, так что на не-квадратной канве будет слева/вверху. Будет занимать половину линейного размера квадратной канвы. Исходник прикреплён ниже, без обрамления HTML.

<div align="center"><canvas id="SmileyId" width="256" height="256">
 Sorry, your browser does not support canvas tag
</canvas></div>
<script type='text/javascript'>
 var canvas = document.getElementById("SmileyId");
 var context = canvas.getContext("2d");
 var cw=canvas.width;
 var ch=canvas.height;
 var rr=Math.min(cw,ch);
 var cx=rr/2;
 var cy=rr/2;
 //Круг
 context.fillStyle = "yellow";
 context.beginPath();
 context.arc(cx, cy, Math.floor(rr*0.25), 0, 2*Math.PI);
 context.closePath();
 context.fill();
 context.lineWidth = 2;
 context.stroke();
 context.fillStyle = "black";
 //Левый глаз
 context.beginPath();
 context.arc(Math.floor(rr*0.41), Math.round(rr*0.4), Math.round(rr*0.03), 0, 2*Math.PI);
 context.closePath();
 context.fill();
 //Правый глаз
 context.beginPath();
 context.arc(Math.ceil(rr*0.59), Math.floor(rr*0.4), Math.round(rr*0.03), 0, 2*Math.PI);
 context.closePath();
 context.fill();
 //Рот
 context.beginPath();
 context.arc(cx, Math.round(rr*0.52), Math.round(rr*0.13), Math.PI, 2*Math.PI, true);
 context.closePath();
 context.fill();
</script>

15.04.2017, 20:37 [5282 просмотра]