Canvas星空效果（JS面向对象）

最新推荐文章于 2024-07-24 11:49:07 发布

前端向朔

最新推荐文章于 2024-07-24 11:49:07 发布

阅读量7.4k

点赞数 7

分类专栏： JavaScript SVG/Canvas 文章标签： canvas 星空面向对象屏幕大小

本文链接：https://blog.csdn.net/u013778905/article/details/79978440

版权

本文介绍如何利用HTML5 Canvas API创建星空效果，重点讨论了基础API的使用，如何获取并响应屏幕大小变化，以及JS面向对象的编程方法。提供了代码示例并探讨了组件化的思想。最后引用陆游的诗句强调实践的重要性。

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

概述

更多Canvas实例可以看GitHub，不定时更新：https://github.com/xiangshuo1992/canvas-demo
这里写图片描述
这个Demo主要有以下几点可以讨论：
1.HTML5 canvas的基础API，如 context.beginPath();
2.获取屏幕大小，并响应窗口大小变化
3.JS面向对象

先看效果 Canvas星空效果

width="100%" height="400" scrolling="no" title="Canvas星空效果" src="//codepen.io/xiangshuo1992/embed/MGgeOR/?height=265&theme-id=0&result&embed-version=2" allowfullscreen="true">See the Pen <a href="https://codepen.io/xiangshuo1992/pen/MGgeOR/">Canvas星空效果</a> by Luke.Deng (<a href="https://codepen.io/xiangshuo1992">@xiangshuo1992</a>) on <a href="https://codepen.io">CodePen</a>.


代码实现

HTML

<canvas id="canvas"></canvas>

CSS

#canvas {
     position: absolute;
     left: 0;
     top: 0;
     background-color: #000;
 }

<script>
    /** 
     * canvas 创建星空
     */

    // 定义变量
    let canvas,
        context,
        screenW,
        screenH,
        stars = [];

    // 定义常量
    const FPS = 50,
        numStars = 2000;

    window.onload = function () {
        //获取canvas
        canvas = document.getElementById('canvas');
        // 设置画布大小
        render();
        //获取canvas执行上下文
        context = canvas.getContext('2d');
        // ===========组件应用层============
        //创建星星