一、设计思路四象限动画让象限从静态概念变成动态过程一个波点沿圆形轨迹绕原点旋转依次穿过Ⅰ→Ⅱ→Ⅲ→Ⅳ四个象限。技术要点①四象限背景用四个半透明色块着色区分②波点坐标由角度参数化x r·cosθ, y r·sinθ驱动③圆形轨迹用虚线画出暗示运动路径。页面第二块 Canvas 专门承载这段动画。二、动画状态与角度驱动EntryComponentstruct BinaryEquation{// 四象限动画状态Stateangle:number0;// 当前角度度每帧 2StatedotX:number4;// 波点横坐标由角度算出StatedotY:number0;// 波点纵坐标StatedotQuadrant:string第一象限;StatequadLog:stringⅠ ;// 象限遍历序列切换时追加privatetimer:number0;// 动画步进角度递增坐标由三角函数实时生成privatetick():void{this.angle2;if(this.angle360){this.angle0;// 一周 360° 循环}constradthis.angle*Math.PI/180;// 角度 → 弧度this.dotX4*Math.cos(rad);// 圆轨迹半径 4this.dotY4*Math.sin(rad);constqthis.quadrantOf(this.dotX,this.dotY);if(q!this.dotQuadrant){// 象限切换时才记录this.recordQuadrant(q);this.dotQuadrantq;}// 其余数据更新y1/y2/Δy见第三篇this.drawQuad();// 每帧重绘}}角度 → 坐标的映射关系角度 θcos θsin θ坐标象限0°10(4, 0)Ⅰ90°01(0, 4)Ⅱ180°−10(−4, 0)Ⅲ270°0−1(0, −4)Ⅳ三、象限判定与遍历序列记录// 象限判定坐标符号 → 象限名privatequadrantOf(x:number,y:number):string{if(x0y0)return第一象限;if(x0y0)return第二象限;if(x0y0)return第三象限;return第四象限;}// 记录遍历序列仅象限变化时追加罗马数字简称privaterecordQuadrant(q:string):void{constsymbols:string[][Ⅰ,Ⅱ,Ⅲ,Ⅳ];constnames:string[][第一象限,第二象限,第三象限,第四象限];constidxnames.indexOf(q);if(idx0)return;constchsymbols[idx];if(this.quadLog.slice(-1)ch)return;// 连续重复不记录this.quadLogthis.quadLogch ;if(this.quadLog.length30){this.quadLogthis.quadLog.slice(-30);// 只保留最近序列}}四、Canvas 四象限着色背景privatedrawQuad():void{constctxthis.ctx;constwctx.width;consthctx.height;ctx.clearRect(0,0,w,h);constoxw/2;// 原点像素坐标constoyh/2;// 四象限背景着色Ⅰ右上 / Ⅱ左上 / Ⅲ左下 / Ⅳ右下半透明区分ctx.fillStylergba(239,68,68,0.08);// Ⅰ 淡红ctx.fillRect(ox,0,w-ox,oy);ctx.fillStylergba(34,197,94,0.08);// Ⅱ 淡绿ctx.fillRect(0,0,ox,oy);ctx.fillStylergba(59,130,246,0.08);// Ⅲ 淡蓝ctx.fillRect(0,oy,ox,h-oy);ctx.fillStylergba(245,158,11,0.08);// Ⅳ 淡黄ctx.fillRect(ox,oy,w-ox,h-oy);// 坐标轴ctx.strokeStyle#C7CDDA;ctx.lineWidth2;ctx.beginPath();ctx.moveTo(0,oy);ctx.lineTo(w,oy);ctx.stroke();ctx.beginPath();ctx.moveTo(ox,0);ctx.lineTo(ox,h);ctx.stroke();// 象限角标Ⅰ Ⅱ Ⅲ Ⅳctx.fillStyle#9CA3AF;ctx.font13px sans-serif;ctx.textAligncenter;ctx.fillText(Ⅰ,oxw*0.18,oy-h*0.12);ctx.fillText(Ⅱ,ox-w*0.18,oy-h*0.12);ctx.fillText(Ⅲ,ox-w*0.18,oyh*0.12);ctx.fillText(Ⅳ,oxw*0.18,oyh*0.12);}四个fillRect正好把画布按原点切成四块——这是象限可视化最直白的实现。五、圆形轨迹与波点绘制// 圆形轨迹虚线圆暗示运动路径半径取画布宽的 29%ctx.setLineDash([5,5]);// 虚线样式ctx.strokeStyle#10B981;ctx.lineWidth2;ctx.beginPath();ctx.arc(ox,oy,w*0.29,0,Math.PI*2);ctx.stroke();ctx.setLineDash([]);// 画完必须恢复实线// 波点光晕 实心 白描边与一元页同款三层画法constdpthis.toPixel(this.dotX,this.dotY,w,h);ctx.beginPath();ctx.arc(dp.px,dp.py,10,0,Math.PI*2);ctx.fillStylergba(16,185,129,0.25);ctx.fill();ctx.beginPath();ctx.arc(dp.px,dp.py,5,0,Math.PI*2);ctx.fillStyle#10B981;ctx.fill();ctx.strokeStyleColor.White;ctx.lineWidth2;ctx.stroke();setLineDash([5, 5])是 Canvas 标准 API5px 实线 5px 空白交替用完必须setLineDash([])恢复实线否则后续所有线条都变虚线。六、动画节奏控制参数值效果每帧角度增量2°一圈 180 帧帧间隔40ms25 帧/秒流畅绕行一圈耗时180 × 40ms 7.2s每个象限停留约 1.8s足够观察七、代码要点参数化运动波点坐标完全由角度算出angle 2是唯一的运动源无需记录速度/位置。切换记录quadLog只在象限变化时追加避免每帧拼接字符串的性能浪费。符号即象限quadrantOf本质是符号表圆形轨迹绕一圈四个象限按顺序各出现一次。视觉三层背景着色 → 虚线轨迹 → 波点先背景后前景层次由绘制顺序天然决定。八、四象限知识对照象限位置符号圆轨迹上的角度范围Ⅰ右上(, )0° ~ 90°Ⅱ左上(−, )90° ~ 180°Ⅲ左下(−, −)180° ~ 270°Ⅳ右下(, −)270° ~ 360°动画把符号规律变成时空规律波点在哪一象限那一组符号就成立眼睛看到比背诵记得牢。