js+canvas绘制360加速球

最新推荐文章于 2025-10-18 10:53:40 发布

原创最新推荐文章于 2025-10-18 10:53:40 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #javascript

前端开发专栏收录该内容

18 篇文章

订阅专栏

本文探讨了使用三次贝塞尔曲线实现动态水波特效的方法。作者通过展示多个实验效果，包括正弦图像和贝塞尔曲线的应用，分享了在尝试制作水波滚动效果过程中的挑战与心得。

广告—：工作室

先给大家看几个效果图。（这里录制的gif软件有瑕疵，会有间隔，实际上是很流畅的）

第一张，因为我是衔接上一个的正弦图像的例子做的。所以直接在上面更改实现的。本想这样可以实现水波流动的特效，但是正弦图像的绘制方式导致它不能填充，（可以去看看上上篇正弦图像的实现），所以喽，这是失败的案例1。

这里写图片描述

然后来看第二张，其实就是平滑的上升。没有什么特别之处，

这里写图片描述

接着是最后一张，最后一张是使用三次贝塞尔曲线绘制的。其实，上面的水波是会动的，只不过动的幅度有点小。

这里写图片描述

总的来说，其实我这是未成功的案例。最好的应试能让水波滚动。我尝试着去动态移动贝塞尔曲线的位置，但是这样的效果并不好。先分析上来看看有没有大牛提供一些意见。底下我再去思考思考，看看有没有其他方式去实现。

然后是上第三张gif的代码

只上传js了

var paint, r;
var width, height;
var  j = 0, c = 0,length=0;
/*程序入口*/
function main() {
    var canvas1 = document.getElementById("canvas1");
    paint = canvas1.getContext("2d");
    width = paint.canvas.width;
    height = paint.canvas.height;
    r = width / 2;
    j = -r;
    start();
    setInterval(start, 50);
}

/*开始进行清除和绘制*/
function start() {
    paint.clearRect(0, 0, width, height);

    drawArc();

    mathR();
    paint.restore();
}

/*绘制一个外层的圆*/
function drawArc() {
    paint.save();
    paint.translate(r, r);
    paint.beginPath();
    paint.arc(0, 0, r, 0, 2 * Math.PI, false);
    paint.stroke();
}

/*计算圆和内部水波的偏移量,并赋给drawSin()长度*/
function mathR() {
    /*控制上下移动*/
    j++;
    c++;
    if (j == r) {
        j = -r;
        c = 0;
    }

    /*变化正弦曲线的左右长度*/
    length = Math.sqrt(r * r - j * j);
    drawSin(j);

    /*绘制加载百分比*/
    paint.beginPath();
    paint.fillStyle = "#ff0000";
    paint.font = 40 + "px Arial";
    paint.textAlign = 'center';
    paint.fillText(c * 100 / (2 * r) + "%", 0, 0);

    /*计算角度值，绘制加载中颜色*/
    var rad = Math.asin(Math.abs(j) / r);
    paint.beginPath();
    paint.fillStyle = "#66ccff";
    paint.globalAlpha = 0.3;
    if (j > 0) {
        paint.arc(0, 0, r, -rad, Math.PI + rad, false);
    } else {
        paint.arc(0, 0, r, rad, Math.PI - rad, false);
    }
    paint.fill();
}


/*绘制贝塞尔曲线，并且长度和位置可变*/
function drawSin(h) {
    paint.fillStyle = "#66ccff";
    paint.globalAlpha = 0.3;
    paint.beginPath();
    paint.moveTo(-length,-h);
    paint.bezierCurveTo(-length,-(h+50),length,-(h+50),length,-h);
    paint.fill();
}