canvas图片动画,canvas入门

1:Canvas动画原理快速切换的静态图像。

2 :基本步骤绘制-绘制-绘制-绘制… 3 :控制函数settimeoutsetintervalrequestanimationframe4:四种运动线性运动const canvas=document.getelemement let radialGradient； let distance=-50； 常量速度=5； constdraw=(axisx ) )/*清空(或部分清空)画布/CTX.clear rect (0，0，600，600 )； radial gradient=CTX.createradialgradient (distance，300，10，distance，300，50 )； radialgradient.addcolorstop(0，' #FFFFFF )； radialgradient.addcolorstop(1，' #EA7F26 )； ctx.fillStyle=radialGradient； ctx.beginPath (； CTX.moveto(distance，300 )； CTX.arc(distance，300，50，0，2 * math.pi，false )； ctx.fill (； distance=distance speed； 距离650 (if )距离=-50； requestanimationframe(draw； }requestanimationframe(draw； CTX.clear rect (0，0，600，600 )； ctx.beginPath (； CTX.moveto(distance，300 )； CTX.arc(distance，300，50，0，2 * math.pi，false )； ctx.fill (； distance=distance speed； 从左到右匀速工作

变速运动const canvas=document.getelementbyid (' canvas )；/*获取2d上下文对象*/const CTX=canvas.get context (' 2d ' )； let radialGradient； let distance=50； 常量速度=5； let count=1； /*h=9.8*(math.pow(t，2 ) )/const draw=(axisx ) )/*清空(或部分清空)画布/CTX.clearrect ) 0，0，660 radialgradient.addcolorstop(0，' #FFFFFF )； radialgradient.addcolorstop(1，' #EA7F26 )； ctx.fillStyle=radialGradient； ctx.beginPath (； CTX.moveto(300，distance )； CTX.arc(300，distance，50，0，2 * math.pi，false )； ctx.fill (； count =1； distance=9.8*(math.pow(count，2 ) )/100； 距离650 {距离=-50； count=1； }requestanimationframe(draw； }requestanimationframe(draw； 自上而下模拟自由落体运动

函数运动(正弦) const canvas=document.getelementbyid ) canvas )；/*获取2d上下文对象*/const CTX=canvas.get context (' 2d ' )； let radialGradient； let distance=0； let axis=300； 常量速度=5； 常量范围=200； let angle=0； constdraw=(axisx ) )/*清空(或部分清空)画布//CTX.clear rect (0，0，600，600 )； radial gradient=CTX.createradialgradient (distance，axis，10，distance，axis，50 )； radialgradient.addcolorstop(0，' #FFFFFF )； radialgradient.addcolorstop(1，' #EA7F26 )； ctx.fillStyle=radialGradient； ctx.beginPath (； CTX.moveto(distance，axis )； CTX.arc(distance，axis，50，0，2 * math.pi，false )； ctx.fill (； axis=300math.sin(Angle ) * range； distance=distance speed； 距离650 {距离=0； angle=-.1； (} angle =.1； requestanimationframe(draw； }requestanimationframe(draw；

环形运动const canvas=document.getelementbyid (' canvas )；/*获取2d上下文对象*/const CTX=canvas.get context (' 2d ' )； let radialGradient； let angle=0.1； var scope=20； let x=300； let y=100； constdraw=(axisx ) )/*清空(或部分清空)画布/CTX.clear rect (0，0，600，600 )； radial gradient=CTX.createradialgradient (x，y，10，x，y，50 )； radialgradient.addcolorstop(0，' #FFFFFF )； radialgradient.addcolorstop(1，' #EA7F26 )； ctx.fillStyle=radialGradient； ctx.beginPath (； CTX.moveto(x，y )； CTX.arc(x，y，50，0，2 * math.pi，false )； ctx.fill (； x=xmath.cos(Angle ) * scope； y=ymath.sin(Angle ) * scope； angle=angle .1； requestanimationframe(draw； ctx.closePath (； ctx.beginPath (； CTX.arc (300，300，200，0，2 * math.pi，false )； ctx.stroke (； }requestanimationframe(draw；