canvas水球动画

最新推荐文章于 2024-08-19 01:33:22 发布

yakelande

最新推荐文章于 2024-08-19 01:33:22 发布

阅读量915

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/yakelande/article/details/79862871

版权

这篇博客介绍了如何使用HTML5的canvas元素创建一个动态的水球动画，包括水波的绘制、数值显示以及动画的更新。通过数学函数模拟水波起伏，并根据数值变化调整波幅，展示了canvas在图形动画上的应用。

摘要由CSDN通过智能技术生成

    toBalling = () => {
        // 水球
        let canvas = this.refs.c;
        let ctx = canvas.getContext("2d");
        let waterBallValue = this.state.waterBallValue;//水球上显示的数值
        let M = Math;
        let Sin = M.sin;
        let Cos = M.cos;
        let Sqrt = M.sqrt;
        let Pow = M.pow;
        let PI = M.PI;
        let Round = M.round;

        let oW = canvas.width = 300;
        let oH = canvas.height = 300;

// 线宽
        let lineWidth = 4;

// 大半径
        let r = (oW / 2);
        let cR = r - 8 * lineWidth;

        ctx.beginPath();

        ctx.lineWidth = lineWidth;

// 水波动画初始参数
        let axisLength = 2 * r - 16 * lineWidth;  // Sin 图形长度
        let unit = axisLength / 8; // 波浪宽
        let range