feat(math6): canvas-анимации — движок math6_anim.js + 3 флагмана

Новый headless-safe движок window.Math6Anim (по канве chem7_anim:
RAF-цикл с паузой вне экрана через IntersectionObserver, prefers-reduced-motion,
в jsdom/HeadlessChrome getContext НЕ вызывается → тесты не падают).
Демо: rollingCircle (колесо катится → путь = C=2πr=πd), sweepArea
(радиус заметает круг → S=πr²), areaModel (площадная модель умножения a·b
на сетке 0,1). Вшито: Гл.6 §2 (колесо + заметание), Гл.1 §6 (умножение).
Тесты math6: 19/19 (+canvas-демо монтируются headless-safe).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/textbooks/math_6_ch6.html

@@ -17,6 +17,7 @@
 <script src="/js/api.js" defer></script>
 <script src="/js/xp.js" defer></script>
 <script src="/js/math6_svg.js" defer></script>
+<script src="/js/math6_anim.js" defer></script>
 <script src="/js/math6_engine.js" defer></script>
 <style>:root{--pri:#d97706;--pri2:#b45309;--pri-soft:#fef3c7;--acc:#f59e0b;--acc2:#d97706;--acc-soft:#fffbeb}</style>
 </head>
@@ -255,6 +256,10 @@ function buildP2(){
     +'<div class="wg-help">Двигай радиус — смотри, как меняются длина окружности и площадь круга ($\\pi=3{,}14$).</div>'
     +'<div class="sliders"><label>Радиус $r$ = <b id="p2-rv">3</b><input type="range" id="p2-r" min="1" max="8" value="3"></label></div>'
     +'<div id="p2-fig"></div><div id="p2-out" class="qbox"></div></div>';
+  h+='<div class="wg" id="p2-anim"><div class="wg-header"><span class="wg-badge">Анимация</span><div class="wg-title">Колесо катится · радиус заметает круг</div></div>'
+    +'<div class="wg-help">Двигай радиус. <b>Колесо</b> за один полный оборот проходит путь, равный длине окружности $C=2\\pi r=\\pi d$. <b>Вращающийся радиус</b> заметает всю площадь круга $S=\\pi r^2$.</div>'
+    +'<div class="sliders"><label>Радиус $r$ = <b id="p2-arv">3</b><input type="range" id="p2-ar" min="1" max="6" value="3"></label></div>'
+    +'<div id="p2-roll"></div><div id="p2-sweep" style="margin-top:10px"></div></div>';
   h+='<div class="wg" id="p2-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Тренажёр: вычисли C или S</div></div>'
     +'<div class="wg-help">Используй $\\pi=3{,}14$. Ответ — число.</div>'
     +'<div class="score-display"><span>Задача <b id="p2-i">1</b> / 6</span><span>Очки: <b id="p2-s">0</b> / 6</span></div>'
@@ -264,6 +269,16 @@ function buildP2(){
   h+=secNav('p1','p3')+readBtn('p2');
   box.innerHTML=h; renderMath(box);
 
+  (function(){
+    if(!window.Math6Anim) return;
+    var sl=document.getElementById('p2-ar'), roll=null, sweep=null;
+    function render(){ var r=+sl.value; document.getElementById('p2-arv').textContent=r;
+      if(roll)roll.stop(); if(sweep)sweep.stop();
+      roll=Math6Anim.rollingCircle(document.getElementById('p2-roll'),{r:r});
+      sweep=Math6Anim.sweepArea(document.getElementById('p2-sweep'),{r:r}); }
+    sl.oninput=render; render();
+  })();
+
   (function(){
     var sl=document.getElementById('p2-r'), fig=document.getElementById('p2-fig'), out=document.getElementById('p2-out');
     function render(){ var r=+sl.value; document.getElementById('p2-rv').textContent=r;