首先，先给特效。我用自己的手机录的，有点不清楚。请原谅我！

本来打算做腾讯的贝塞尔曲线下拉刷新图。然后和朋友打了个QQ电话，没接通的时候稍微关注了一下动画。然后我想到了实现以下几点。

这里要注意的是：

画布中心点变为画布中心后，画布y轴自上而下为(-，)。数学坐标系的y轴从上到下是(，-)。

先看看html代码。至少简单加个画布，基本不做别的。

HTML代码

画布id='canvas1 '宽度='500 '高度=' 500 '/画布

javascript，javascript

var paint，r；//设置画笔和半径改变宽度、高度；//获取画布的长宽var count=0；//设置正曲线的廉价量varcolors=['# 66ccff '，' # ff 0000 ']；/*程序条目*/function main(){ varcanvas 1=document . getelementbyid(' canvas 1 ')；paint=canvas 1 . GetContext(' 2d ')；width=paint . canvas . width；height=paint . canvas . height；r=宽度/2；start()；setInterval(开始，200)；}/*开始清洗和绘图*/函数start () {paint.clearrect (0，0，宽度，高度)；drawXY()；drawin()；paint . restore()；}/*绘制坐标系*/函数drawXY(){ paint . save()；paint.translate(r，r)；paint . BeginPath()；paint . line width=1；paint.moveTo(0，-r)；paint.lineTo(0，r)；paint . stroke()；paint . line width=1；paint.moveTo(-r，0)；paint.lineTo(r，0)；paint . stroke()；}/*正弦曲线可以表示为y=Asin(x ) k，定义为函数y=Asin(x ) k在直角坐标系中的图像，*//*绘制sin正弦图像*/函数drawinsin(){ paint . save()；计数；//设置每个时刻的偏移var i、j、rad、y；for(j=0；J2；j ) {对于(I=-1000；i 1000I){ paint . BeginPath()；paint . strokestyle=colors[j]；rad=i *数学。PI/180；y=-20 * math . sin(rad-(count j))；paint.arc(i，y，0.3，0，2 * Math。PI，假)；paint . stroke()；} } paint . restore()；}JS要注意。更改图像的定时时，必须先清除它。之后，应该保存并恢复绘制的图像。否则会出现重叠或显示等bug。

这里定义的画图变量名是基于安卓画图习惯。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。