JavaScript 记录贴

Sunshine123 · 2018年11月13日 · 最后由 es6china 回复于 2018年11月14日 · 50 次阅读

通过canvas实现简单弹幕demo

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
        margin: 0;
        padding: 0;
    }

    body {
        overflow: hidden;
    }

    #myCanvas {
        background-color: #000;
    }
    </style>
</head>

<body>
    <canvas id="myCanvas"></canvas>
    <div style="position: fixed;bottom:20px;left: 50%;">
        <input type="text" id="input" name="">
        <button type="button">发送</button>
        <button type="button">关闭</button>
    </div>
    <script>
    var myCanvas = document.getElementById('myCanvas');
    var ctx = myCanvas.getContext("2d");
    var starlist = [];
    let input = document.getElementById('input')
    let btn = document.getElementsByTagName('button')[0];
    let opn = document.getElementsByTagName('button')[1];
    let num = 1;
    let id;

    btn.onclick = send;
    opn.onclick = function() {
        console.log("one")
        ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
        cancelAnimationFrame(id)
    }

    function send() {
        let val = input.value;
        starlist.push(new Star(val, myCanvas.width, 15));
        input.value = '';
    }

    function init() {
        // 设置canvas区域的范围为整个页面
        myCanvas.width = window.innerWidth;
        myCanvas.height = window.innerHeight;
    };
    init();
    // 监听屏幕大小改变 重新为canvas大小赋值
    window.onresize = init;

    for (let i = 1; i < 5; i++) {
        starlist.push(new Star("测试" + i, 200 * i, 40 * i));
    }

    console.log(starlist)
    // 随机数函数
    function random(min, max) {
        // 设置生成随机数公式
        return Math.floor((max - min) * Math.random() + min);
    };

    // 构造函数
    function Star(text, x, y) {
        // 将坐标存在每一个点的对象中
        this.text = text;
        this.x = x;
        this.y = y;
        this.color = "#fff";
        this.font = "16px";
        this.draw = function() {
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.font = this.font;
            ctx.fillText(this.text, --this.x, this.y)
        }
        // 开始画
        // this.draw();
    }

    // 渲染
    function render() {
        // 把原来的内容区域清除掉
        ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
        // 根据存在数组中的每一位对象中的信息绘制弹幕
        starlist.forEach(function(ele, i) {
            ele.draw();
            // 如果数组中的弹幕已经播放完,把它删掉
            if (ele.x < (-ctx.measureText(ele.text).width)) {
                return false;
            }
        });
        id = requestAnimationFrame(render);
    }
    render()
    </script>
</body>

</html>
共收到 1 条回复

厉害哦

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册