js实现了在二维平面上绘制8的方法

效果如下：

要通过画圆实现这样的8字形，首先要画圆。我们可以从角度变化到弧度：

弧度=角度/180 *数学。PI；然后通过弧度得到当前点的位置，这样最基本圆的位置在-1到1的位置内

var x=Math.sin(弧度)；var y=Math.cos(弧度)；画完一个完整的圆后，另一个圆的X轴与当前的X轴相同，但Y轴需要改变。因此，我们将判断是否画一个完整的圆(画一个完整的8需要720度)。如果大于360度，则表示当前正在绘制第二个圆。因此，在画第二个圆时，我们调整Y的位置，从而实现这一点

if(angle r0 360){ y=-y ^ 2；}案例代码

！doctype html html head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，user-scalable=no，initial-scale=1.0，最大-scale=1.0，最小-scale=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title实现了在2d平面上绘制8/title style # canvas { display : block；margin:0 auto}/style/head dycanvas id=' canvas ' width=' 300 ' height=' 600 '/canvas/bodyscriptvar canvas=document . queryselector(' # canvas ')；var CTX=canvas . getcontext(' 2d ')；变化角度=0；//角度var弧度=0；//弧度函数draw(){ angle=2；弧度=角度/180 *数学。PI；var x=Math.sin(弧度)；var y=Math.cos(弧度)；if(angle r0 360){ y=-y ^ 2；} var left=x * 150 150var top=y * 150 150ctx.arc(左，上，1，0，数学。PI * 2)；ctx.strokeStyle='绿色'；CTX . stroke()；requestAnimationFrame(绘制)；} requestAnimationFrame(draw)；/script/html以上在2d平面上绘制8的js方法是边肖分享的全部内容。希望能给大家一个参考，支持我们。