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 [5416 просмотров]