canvas画星星

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

马德里甜欣

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

阅读量515

点赞数

文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/weixin_51564923/article/details/129792074

版权

该代码示例展示了如何使用HTML5的CanvasAPI创建一个星空背景，并通过JavaScript实现点击按钮切换播放和暂停星空动画的效果。主要技术包括径向渐变填充、随机生成星星以及利用canvas进行图形绘制和变换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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的参数
             *从左至右依次为ÿ