Javascript 画布线条画动画

我是使用HTML5的动画新手。我正在努力在画布上创建具有所需线条长度的线条绘制动画

这是密码

var canvas=document.getElementById（“canvas”），
context=canvas.getContext（“2d”），
宽度=画布。宽度=窗口。内部宽度，
高度=canvas.height=window.innerHeight；
var x=200；
变量y=200；
draw（）；
更新（）；
函数绘图（）{
context.beginPath（）；
上下文。移动到（100100）；
lineTo（x，y）；
stroke（）；
}
函数更新（）{
clearRect（0，0，宽度，高度）；
x=x+1；
y=y+1；
draw（）；
requestAnimationFrame（更新）；
}

html，
身体{
边际：0px；
}
帆布{
显示：块；
}

---

以下是我认为您正在描述的内容

window.onload=function（）{
var canvas=document.getElementById（“canvas”），
context=canvas.getContext（“2d”），
宽度=画布。宽度=400，
高度=画布。高度=220，
xcenter=200，
中心=110，
半径=0，
半径max=100，
起始角1=0，
起始角2=0；
函数环面（角）{
返回角*（数学PI/180）；
}
功能图（x1、y1、x2、y2）{
context.beginPath（）；
上下文。移动到（x1，y1）；
lineTo（x2，y2）；
stroke（）；
}
功能牵引轮（xc、yc、启动角、计数、弧度）{
var inc=360/计数；
用于（可变角度=起始角度；角度<起始角度+180；角度+=inc）{
var x=数学cos（环面（角度））*rad；
var y=数学sin（环面（角度））*rad；
绘制（xc-x，yc-y，xc+x，yc+y）；
}
}
函数更新（）{
起始角1+=0.1；
起始角2-=0.1；
如果（半径这里是我认为你所描述的


window.onload=function（）{
var canvas=document.getElementById（“canvas”），
context=canvas.getContext（“2d”），
宽度=画布。宽度=400，
高度=画布。高度=220，
xcenter=200，
中心=110，
半径=0，
半径max=100，
起始角1=0，
起始角2=0；
函数环面（角）{
返回角*（数学PI/180）；
}
功能图（x1、y1、x2、y2）{
context.beginPath（）；
上下文。移动到（x1，y1）；
lineTo（x2，y2）；
stroke（）；
}
功能牵引轮（xc、yc、启动角、计数、弧度）{
var inc=360/计数；
用于（可变角度=起始角度；角度<起始角度+180；角度+=inc）{
var x=数学cos（环面（角度））*rad；
var y=数学sin（环面（角度））*rad；
绘制（xc-x，yc-y，xc+x，yc+y）；
}
}
函数更新（）{
起始角1+=0.1；
起始角2-=0.1；
如果（半径，则需要使用变换或一点三角函数

转变
对于每个帧：


重置变换并平移到中心
透明帆布
从中心向右画一条线
旋转x角
从步骤2开始重复，直到绘制所有线


var ctx=c.getContext（“2d”）；
var centerX=c.width>>1；
变量centerY=c.高度>>1；
var maxLength=Math.min（centerX，centerY）；//使用最短方向进行演示
var currentLength=0；//当前长度，用于动画
var lenStep=1；//动画的“速度”
函数render（）{
setTransform（1,0,0,1，centerX，centerY）；
ctx.clearRect（-centerX，-centerY，c.宽度，c.高度）；
ctx.beginPath（）；
对于（变量角度=0，步长=0.1；角度

您需要使用变换或一点三角法

转变
对于每个帧：


重置变换并平移到中心
透明帆布
从中心向右画一条线
旋转x角
从步骤2开始重复，直到绘制所有线


var ctx=c.getContext（“2d”）；
var centerX=c.width>>1；
变量centerY=c.高度>>1；
var maxLength=Math.min（centerX，centerY）；//使用最短方向进行演示
var currentLength=0；//当前长度，用于动画
var lenStep=1；//动画的“速度”
函数render（）{
setTransform（1,0,0,1，centerX，centerY）；
ctx.clearRect（-centerX，-centerY，c.宽度，c.高度）；
ctx.beginPath（）；
对于（变量角度=0，步长=0.1；角度

这是一种可变长度的新兴模式。它有一个长度数组元素，用于控制盘中以不同速率增长的每个轮辐。您可以使用设置来改变结果：


var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
var width=canvas.width=window.innerWidth；
var height=canvas.height=window.innerHeight；
var xcenter=宽度/4；
变量Y中心=高度/2；
变异半径；
var时间；
如果（宽度>高度）{
半径=高度*0.4；
}
否则{
半径=宽度*0.4；
}
var起始角1=0；
var起始角2=0；
函数环面（角）{
返回角*（数学PI/180）；
}
功能图（x1、y1、x2、y2）{
context.beginPath（）；
上下文。移动到（x1，y1）；
lineTo（x2，y2）；
stroke（）；
}
var radmax=宽度；
var-rads=[]；
var-radsinc=[]；
功能牵引轮（xc、yc、启动角、计数、弧度）{
var inc=360/计数；
var i=0；
用于（可变角度=起始角度；角度<起始角度+180；角度+=inc）{
var x=数学cos（环面（角度））*rads[rad+i]；