canvas画星星

最新推荐文章于 2024-04-15 13:20:28 发布

马德里甜欣

最新推荐文章于 2024-04-15 13:20:28 发布

阅读量402

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_51564923/article/details/129792074

版权

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <canvas id="canvas" style="border:1px solid #aaa;margin: 50px auto;display:block;"></canvas>
    <button style="margin-left: 50%;">播放</button>
    <script type="text/javascript">
        // 画星空
        window.onload = function () {
            // 找到画布
            var canvas = document.getElementById("canvas");
            // 定义画布的长宽
            canvas.width = 1000;
            canvas.height = 500;
            // canvas上下文
            var context = canvas.getContext("2d");
            /**
             * [skyStyle description]
             * @type {[type]}
             * createRadialGradient是径向渐变填充函数
             *createRadialGradient的参数
             *从左至右依次为：
             * x0,y0,r0:起点的位置（相对canvas画布）和小圆的半径
             * x1,y1,r1:扩散至的终点的位置和大圆的半径
             */
            var skyStyle = context.createRadialGradient(
                canvas.width / 2, canvas.height, 0,
                canvas.width / 2, canvas.height, canvas.height);
            skyStyle.addColorStop(1.0, 'black');
            //将skyStyle用于填充展示天空的背景色
            context.fillStyle = skyStyle;
            //绘制矩形背景
            context.fillRect(0, 0, canvas.width, canvas.height);
            //获取按钮dom节点
            var button = document.querySelector('button')
            var isClick = false
            //三元改变按钮文字内容
            button.addEventListener('click', () => {
                isClick = !isClick
                button.innerHTML = !isClick ? "播放" : "暂停"
                if (!isClick) {
                    window.location.reload();
                }
            })

            // 封装绘制星星函数
            function changeStarRandom() {
                var num = Math.random() * 10  //随机数
                for (var i = 0; i < num; i++) {
                    var r = Math.random() * 30 + 5;
                    var x = Math.random() * canvas.width;
                    var y = Math.random() * canvas.height;
                    var a = Math.random() * 360;
                    drawStar(context, x, y, r, a);

                }
            }

            // 以两秒钟的频率更换随机数
            setInterval(() => {
                // 按钮为false时清除画布
                if (!isClick) {
                    return;
                }
                // 按钮为true时绘制星星
                changeStarRandom()
            }, 2000);
        };
        // 绘制五角星
        // 改善后的drawStar使用了渐变色radialGrad(径向渐变)让天空的颜色更加逼真
        /**
        * [drawStar description]
        * @param  {[type]} cxt [description] 绘制的上下文环境
        * @param  {[type]} r   [description] 五角星内部小圆的半径
        * @param  {[type]} R   [description] 五角星外部大圆的半径
        * @param  {[type]} x   [description] 五角星在水平方向上的位移
        * @param  {[type]} y   [description] 五角星在竖直方向上的位移
        * @param  {[type]} rot [description] 五角星的旋转角度
        * @return {[type]}     [description]
        */
        function drawStar(ctx, x, y, R, rot) {
            ctx.save();//与restore()一起出现，防止状态影响其他的绘制
            //图形变换
            ctx.translate(x, y);//偏移
            ctx.rotate(rot / 180 * Math.PI);//旋转
            ctx.scale(R, R);//缩放比例
            startPath(ctx);//开始绘制
            ctx.fillStyle = "yellow";//内部填充的颜色
            ctx.fill();//内部填充颜色
            ctx.restore();
        }
        /**
        * [startPath description]画星星的具体算法
        * @param  {[type]} ctx [description]
        * @return {[type]}     [description]
        */
        function startPath(ctx) {
            ctx.beginPath();
            for (var i = 0; i < 5; i++) {
                ctx.lineTo(Math.cos((28 + i * 72) / 180 * Math.PI),
                    -Math.sin((28 + i * 72) / 180 * Math.PI));
                ctx.lineTo(Math.cos((64 + i * 72) / 180 * Math.PI) * 0.5,
                    -Math.sin((64 + i * 72) / 180 * Math.PI) * 0.5);
            }
            ctx.closePath();
        }
    </script>
</body>

</html>

技术：html+css

详细技术：canvas画布

web前端技术基础大作业2

实现点击按钮播放与暂停，实现随机放置星星