用canvas画七彩虹伞_使用canvas画一把雨伞-CSDN博客

本文链接：https://blog.csdn.net/Serena_tz/article/details/108713754

彩虹小伞效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1</title>
    <style>
        #canvas {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="500" height="800"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var pen = canvas.getContext("2d");
        // 彩虹七色小伞
        var rainbow = ["#FF0000","#FF7F00","#FFFF00","#00FF00","#00FFFF","#0000FF","#871F78"]
        for (var i = 0; i < 7; i++) {
            pen.fillStyle = pen.strokeStyle = rainbow[i];
            // 伞盖
            pen.beginPath();
            pen.arc(30 + 70 * i, 140, 30, Math.PI, 2 * Math.PI);
            pen.closePath();
            pen.fill();
            // 伞柄
            pen.beginPath();
            pen.moveTo(30 + 70 * i, 140);
            pen.lineTo(30 + 70 * i, 187);
            pen.closePath();
            pen.stroke();
            // 伞把
            pen.beginPath();
            pen.arc(26 + 70 * i, 187, 4, 0, Math.PI);
            pen.stroke();
        }
        // 随机变颜色的七个小伞
        // setInterval(function () {
        //     for (var i = 0; i < 7; i++) {
        //         pen.fillStyle = pen.strokeStyle = randomColor();
        //         // 伞盖
        //         pen.beginPath();
        //         pen.arc(30 + 70 * i, 40, 30, Math.PI, 2 * Math.PI);
        //         pen.closePath();
        //         pen.fill();
        //         // 伞柄
        //         pen.beginPath();
        //         pen.moveTo(30 + 70 * i, 40);
        //         pen.lineTo(30 + 70 * i, 87);
        //         pen.closePath();
        //         pen.stroke();
        //         // 伞把
        //         pen.beginPath();
        //         pen.arc(26 + 70 * i, 87, 4, 0, Math.PI);
        //         pen.stroke();
        //     }
        // }, 1000)

        // 生成随机颜色的方法
        function randomColor() {
            var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
            var c = ''
            for (var i = 0; i < 6; i++) {
                c += arr[Math.round(Math.random() * 15)]
            }
            return "#" + c;
        }
    </script>
</body>

</html>