canvas_html_制作三行情书的弹幕-阿里云开发者社区

canvas_html_制作三行情书的弹幕

2024-04-25 50

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： canvas_html_制作三行情书的弹幕

背景

对弹幕的实现一直都很好奇，感觉像是用css的水平animation移动实现，今天来一探究竟随便拿个女神勋章

来源：https://bestvist.github.io/barrage-div/src/example.html

效果

canvas介绍

Canvas是HTML5中的一个新元素，它是一个用于在网页上绘制图形的区域，可以通过JavaScript中的API来动态地绘制图形、图像或动画。

Canvas允许您在浏览器窗口中绘制基本图形、图像和文本。它使用JavaScript代码来绘制图形，这意味着您可以轻松地动态地创建和更新图形，而不必依赖服务器端的图形文件。

Canvas可以用于绘制各种图形，如线条、圆形、矩形、多边形等，还可以绘制图片和文字。Canvas还可以用于创建复杂的动画效果，例如在画布上绘制二维图形并以任意帧速率播放它们。

Canvas在现代Web开发中被广泛应用，尤其是在游戏和数据可视化方面。

使用案例

以下是在 HTML5 canvas 上绘制一个三角形的实例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas绘制三角形</title>
</head>
<body onload="drawTriangle()">
  <canvas id="myCanvas" width="400" height="300"></canvas>
  <script>
    function drawTriangle() {
      var canvas = document.getElementById('myCanvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(200, 50);
        ctx.lineTo(100, 250);
        ctx.lineTo(300, 250);
        ctx.closePath();
        ctx.strokeStyle = '#ff0000';
        ctx.stroke();
      }
    }
  </script>
</body>
</html>

在上述代码中，我们使用 beginPath() 方法开始一个新路径，使用 moveTo() 方法将画笔移动到三角形的第一个点（即顶点），使用 lineTo() 方法将画笔移动到三角形的第二个和第三个点，最后使用 closePath() 方法关闭路径。

在绘制完成后，我们使用 stroke() 方法将路径的轮廓线条绘制出来，并设置颜色为红色。

这样我们就成功地在 canvas 上绘制出了一个三角形。

原理

1、设置展示弹幕元素位置属性为relative
2、动态创建弹幕元素，位置属性设置absolute，left为展示宽度
3、随机设置弹幕元素top值
4、随机产生弹幕元素移动速率，修改left值

创建div节点采用absolute布局修改 left、top位置，文字设置不换行，调整文字速度。

let div = document.createElement('div');
        div.style.position = 'absolute';
        div.style.left = this.domWidth + 'px';
        div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + 'px';
        div.style.whiteSpace = 'nowrap';
        div.style.color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
        div.innerText = text;

css

样式背景图我使用了一张图片

* {
box-sizing: border-box;
outline: none;
margin:0;
padding:0;
}
p {
margin: .5em;
word-break: break-all;
}
.container {
position: relative;
width: 1920;
height: 1080px;
margin: 0;
padding-right: 200px;
}
.content {
width: 100%;
height: 100%;
background-image: url('../img/test.jpg');
background-size: 100% 100%;
}
.content-opt {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100%;
}
.content-text {
height: calc(100% - 30px);
margin-bottom: 30px;
border: 1px solid #ccc;
overflow: auto;
}
.content-input {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
border: 1px solid #ccc;
}
.content-input input {
width: 70%;
padding: 2px;
border-radius: 5px;
}
.content-input button {
padding: 3px 10px;
border: none;
border-radius: 5px;
background: rgb(90, 154, 214);
}

弹幕文字动态生成

class Barrage {
    constructor(id) {
        this.domList = [];
        this.dom = document.querySelector('#' + id);
        if (this.dom.style.position == '' || this.dom.style.position == 'static') {
            this.dom.style.position = 'relative';
        }
        this.dom.style.overflow = 'hidden';
        let rect = this.dom.getBoundingClientRect();
        this.domWidth = rect.right - rect.left;
        this.domHeight = rect.bottom - rect.top;
    }
    shoot(text) {
        let div = document.createElement('div');
        div.style.position = 'absolute';
        div.style.left = this.domWidth + 'px';
        div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + 'px';
        div.style.whiteSpace = 'nowrap';
        div.style.color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
        div.innerText = text;
        this.dom.appendChild(div);
        let roll = (timer) => {
            let now = +new Date();
            roll.last = roll.last || now;
            roll.timer = roll.timer || timer;
            let left = div.offsetLeft;
            let rect = div.getBoundingClientRect();
            if (left < (rect.left - rect.right)) {
                this.dom.removeChild(div);
            } else {
                if (now - roll.last >= roll.timer) {
                    roll.last = now;
                    left -= 3;
                    div.style.left = left + 'px';
                }
                requestAnimationFrame(roll);
            }
        }
        roll(50 * +Math.random().toFixed(2));
    }
}

初始化数据

(function() {
      let barage = new Barrage('content');
      function appendList(text) {
        let p = document.createElement('p');
        p.innerText = text;
        document.querySelector('#content-text').appendChild(p);
      }
      document.querySelector('#send').onclick = () => {
        let text = document.querySelector('#text').value;
        barage.shoot(text);
        appendList(text);
      };
      const textList = ['一眼情不知所起， 只知开始未来， 便只为你', '螃蟹在剥我的壳，笔记本在写我。 漫天的我落在枫叶上雪花上。 而你在想我。——小雨',
        '我是浪迹天涯的游子 爱这山河之间的诗词 你却从不看这每行诗的第一个字', '喝醉须千杯 情诗只三行 你的笑，我看一眼就醉', '我爱的人名字只有几个字 写不了三行 却铺满了整个床',
        '你是字里行间的秘密 是笔尖暗喻的欢喜 是我珍藏心底的触手可及', '我恋过星辰大海 爱过山川河流 你是我最终的归宿', '子曰：三思而后行 1...2...3... 我喜欢你',
        '风吹草动 花开悸动 见你心动 — 遇见篇——三行情诗', '我还是很喜欢你 柳动蝉鸣 日落潮汐 不能自己', '我还是很喜欢你 像梅雨时节的落雨 延绵无期', '天上的云 身旁的风 眼前的你',
        '你应该在我身边就好像 月亮应该藏在被窝里 银河应该绕着地球转', '早餐 午餐 你是我的一日三餐 ', '一行在梦里 一行在心里 一行你你你',
        '这场相遇真是一个奇迹 就像撒哈拉长满玫瑰 我恰好遇到你', '你是孩童眼角的无邪 是诗人眼角的偏执 是我用尽一生也戒不掉的强迫症',
        '把眉清目秀还给山水天地 把松间细雨还给初遇 把一见钟情还给你',
        '把眉清目秀还给山水天地 把松间细雨还给初遇 把一见钟情还给你', '春雨及冰蚕 白昼与黑夜 我和你', '我与你 很远 隔着纱，隔着帘 隔着岁华，隔着流年',
        '我看见雨， 落在我眼里， 变成了你。', '我爱你 爱你 你', '你是我的固定资产， 我爱你是在建工程， 希望和你慢慢折旧。', '我想牵着你的手 一起走过这条路 路这头是青丝，路那头是白发。',
        '我想娶 你愿嫁 才成家', '你看着我， 酷酷的说:我喜欢你， 翻个身，梦醒了。', '我听说十三月有你， 便穷尽这一生去寻你， 满天柳絮倾覆了我情意。',
        '我还是很喜欢你 像上学时做不出的难题 困住自己', '低低呓语，吟叹你的名字，如诗 觥筹交错，沉醉你的样子，如酒 南柯一梦，品忆你的身影，如茗', '云恋雨 风徐徐 如我爱你，没有限期',
        '我爱你 其余两行 都是多余 ', '你在赏景 我在赏你 我们都在景中', '你是雪中的迎春、雨中的彩虹。 我在格陵兰的心中将你种下。 在撒哈拉的脚下为我祈祷。',
        '我还是很爱你 像晨风拂过树梢 悄无声息', '孔子曰：吾日三省吾身 每次要反省自己 我怎么那么喜欢你', '我是个路痴 走到了你的世界 就再也走不出来了',
        '我想好了 如果你不见了我就翻遍天下去寻你 如果你不在了我就抛弃天下去陪你', '清晨的阳光 慵懒的你 微笑的我', '我喜欢夏天的雨 雨后的光 和任何时候的你',
        '朦胧的远方 和朦胧的你 便是我朦朦胧胧的思念', '遇见你是 恰逢千岛寒流与日本暖流交汇 温暖了整片海域', '孔子说：不耻下问 那我可以问一句 我可以爱你吗',
        '我还是很喜欢你 像心间的晴天雨 彩虹相依', '见到你的那个午后 我的世界 从此没有了冬秋', '一曲相思 半点离愁 如何与君共白头', '所有的灵感都来源于你 可我写完了整首诗 还是没有写完你',
        '山有木兮木有枝 心悦是你 不知也是你', '我曾像风一样自由 自从牵了你的手 白云从此刻驻留 ', '风带着秘密吹过一整片森林 于是每一棵树都知道 我只喜欢你',
        '我有好多个一瞬间， 看着街边路人熙熙攘攘， 发现抬起的手触不到你。', '你就像童话故事里一样 不一定住在皇宫里 但一定是我的公主', '分享到微信 最美好的邂逅 无非你有一生 我有一世',
        '我做了一个很长的梦 梦里看见了你 我想做上一辈子', '书信很慢 情话很长 我很想你 ', '我还是很喜欢你 像是隔着山的海 不远万里也要来见你', '忽见你一笑 山花烂漫了 我心也动了',
        '文采斐然的你 古灵精怪的你 我喜爱的你', '浮世三千 吾爱有三 日 月 卿 日为朝 月为暮 卿为朝朝暮暮 ', '那就是风该有的样子 又像云穿过思念 刚好遇见你',
        '黑暗里有光，烈日下有影 如影随形的想念 逃不过你', '关于你 我知之不多 却念念不忘', '喜欢你呀 像一颗奶糖 从眉间甜到脚尖 ', '关于你， 我知之不多， 却念念不忘！ ',
        '有你的日子 风很轻，云很淡 天空很蓝'
      ];
      textList.forEach((s) => {
        barage.shoot(s);
        appendList(s);
      })
    })()

视图层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三行情书弹幕</title>
    <link rel="stylesheet" href="./example.css">
</head>
<body>
<div class="container">
    <div id="content" class="content"></div>
    <div class="content-opt">
        <div id="content-text" class="content-text"></div>
        <div class="content-input">
            <input id="text" type="text">
            <button id="send">发送</button>
        </div>
    </div>
</div>
<script src="./barrage.js"></script>
<script src="./example.js"></script>
</body>
</html>

结束

感谢阅读！如有错误欢迎指正。

canvas_html_制作三行情书的弹幕

背景

效果

canvas介绍

原理

结束

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

canvas_html_制作三行情书的弹幕

背景

效果

canvas介绍

原理

结束

热门文章

最新文章

相关课程

相关电子书

相关实验场景