技術標籤：web前端javascripthtml5

我在第一篇部落格中提到運用canvas製作加速球效果，現在把整個程式碼分享給大家，希望對大家有幫助。（轉載請標明出處）
先上效果圖：

還存在一些問題：
1、想法是滑鼠觸碰到滑塊才執行畫波浪的效果，結果是直接碰到input標籤就觸發；
2、移除滑鼠重新觸碰後有重新繪畫；
（其它問題歡迎大佬在評論區指正）

現在附上程式碼：

這裡是html部分：

<!-- 畫畫區域 -->
    <div class="draw">
        <!-- 底層 -->
        <
 
canvas id="bottomCanvas" width="400" height="200"></canvas>
        <!-- 中間層 長方形掏空中間圓形 -->
        <canvas id="middleCanvas" width="400" height="200"></canvas>
        <!-- 頂層 -->
        <canvas id="topCanvas"
 
 width="400" height="200"></canvas>
        <div class="show">
            <p id="number">0%</p>
        </div>
    </div>
    <!-- 控制區域 -->
    <div class="control">
        <input type="range" id
 
="change" value="0" min="0" max="100">
    </div>

下面是css樣式：

* {
            margin: 0 auto;
            padding: 0;
        }

        .draw {
            margin-top: 50px;
            width: 400px;
            height: 200px;
            position: relative;
        }

        .control {
            margin-top: 50px;
            width: 128px;
        }

        #bottomCanvas {
            position: absolute;
            top: 0px;
            left: 0px;
        }

        #middleCanvas {
            position: absolute;
            top: 0px;
            left: 0px;
        }

        #topCanvas {
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .show {
            width: 400px;
            height: 200px;
            position: absolute;
            z-index: 10;
        }

        #number {
            text-align: center;
            line-height: 200px;
            color: rgb(11, 0, 202);
        }

接下來是js，部分地方有註釋，如有不清楚可以在評論區或是私聊詢問

window.onload = function () {
            // 中間層
            var middle = document.getElementById("middleCanvas");
            var ctx = middle.getContext("2d");

            //繪製中間層長方形
            ctx.fillStyle = "white";
            ctx.fillRect(0, 0, 400, 200);

            ctx.globalCompositeOperation = "xor"; //重疊部分會變成透明
            // 繪製重疊的圓形
            ctx.beginPath();
            ctx.arc(200, 100, 100, 0, 2 * Math.PI);
            ctx.fillStyle = "blue"; //將線條顏色設定為藍色
            ctx.fill();

            //頂層
            var top = document.getElementById("topCanvas");
            var ctx = top.getContext("2d");

            //繪製頂層的圓形
            ctx.beginPath();
            ctx.arc(200, 100, 100, 0, 2 * Math.PI);
            ctx.strokeStyle = "blue"; //將線條顏色設定為藍色
            ctx.stroke();

            //給input:range新增滑鼠移動事件
            //繪製頂層波浪效果，改變數字
            document.getElementById("change").onmousemove = function () {
                var bottom = document.getElementById("bottomCanvas");
                ctx = bottom.getContext("2d");

                //定義波浪效果的寬高
                width = bottom.width = bottom.offsetWidth;
                height = bottom.height = bottom.offsetHeight;

                //改變H
                var num = document.getElementById("change").value;
                console.log(num);
                var h = 200 - num * 2;

                var show = document.getElementById("number");
                show.innerHTML = num + "%";
                show.style.color = "rgb(11, " + num * 2 + ", 202)"

                var A = 10, //波長
                    W = 1 / 50, //波寬
                    Q = 0, //水平方向位移
                    H = h; //豎直方向位移
                var speed = 0.03; //波動的速度 正負值不影響

                // 建立漸變
                var grd = ctx.createLinearGradient(0, 200, 0, 0); //createLinearGradient(x,y,x1,y1) - 建立線條漸變
                grd.addColorStop(0, "blue");
                grd.addColorStop(1, "#0ba0ca");

                // (function 函式名(){}()) 立即執行函式的寫法
                (function draw() {
                    window.requestAnimationFrame(draw); //建立動畫
                    ctx.clearRect(0, 0, width, height); //清除畫布
                    ctx.beginPath(); //開始繪畫
                    ctx.fillStyle = grd; //填充漸變
                    ctx.lineWidth = 1;
                    ctx.moveTo(0, height / 2);
                    Q += speed;

                    for (let x = 0; x <= width; x++) {
                        var y = A * Math.sin(W * x + Q) + H;
                        ctx.lineTo(x, y);
                    }
                    ctx.lineTo(width, height);
                    ctx.lineTo(0, height);
                    ctx.fill();
                    ctx.closePath();

                    //設定重疊波
                    //設定重疊效果
                    ctx.globalCompositeOperation = "destination-over";//上層會把下層覆蓋
                    for (let x = 0; x <= width; x++) {
                        var y = (A + 10) * Math.sin((W / 1.5) * x + (Q + 1.5)) + H;
                        ctx.lineTo(x, y);
                    }
                    ctx.lineTo(width, height);
                    ctx.lineTo(0, height);
                    ctx.fillStyle = "#0080ff";
                    ctx.fill();
                    ctx.closePath();

                    //設定重疊波
                    //設定重疊效果
                    ctx.globalCompositeOperation = "destination-over";
                    for (let x = 0; x <= width; x++) {
                        var y = (A + 7) * Math.sin((W / 2) * x + (Q + 1)) + H;
                        ctx.lineTo(x, y);
                    }
                    ctx.lineTo(width, height);
                    ctx.lineTo(0, height);
                    ctx.fillStyle = "#c4e1ff";
                    ctx.fill();
                    ctx.closePath();
                })()
            }
        }

感謝瀏覽，希望能幫到你