Yin and yang: Difference between revisions
→{{header|JavaScript}}: added Canvas
Not a robot (talk | contribs) (Add SETL) |
(→{{header|JavaScript}}: added Canvas) |
||
Line 3,222:
</html></syntaxhighlight>
===Canvas===
{{trans|Flutter}}
Run this script from the browser console (F12) or from the <script> tag of an html document.
<syntaxhighlight lang="javascript">function yinYang(r, x, y, th = 1) {
const PI = Math.PI;
const path = new Path2D();
const cR = (dY, radius) => { path.arc(x, y + dY, radius, 0, PI * 2); path.closePath() };
cR(0, r + th);
cR(r / 2, r / 6);
cR(-r / 2, r / 6);
path.arc(x, y, r, PI / 2, -PI / 2);
path.arc(x, y - r / 2, r / 2, -PI / 2, PI / 2);
path.arc(x, y + r / 2, r / 2, -PI / 2, PI / 2, true);
return path;
}
document.documentElement.innerHTML = '<canvas width="170" height="120"/>';
const canvasCtx = document.querySelector('canvas').getContext('2d');
canvasCtx.fill(yinYang(50.0, 60, 60), 'evenodd');
canvasCtx.fill(yinYang(20.0, 140, 30), 'evenodd');
</syntaxhighlight>
=={{header|jq}}==
|