canvas弹幕方式从下往上~匀速直线运动~初版

最新推荐文章于 2021-11-22 11:14:56 发布
最新推荐文章于 2021-11-22 11:14:56 发布
阅读量701 收藏
点赞数
分类专栏： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongsdh/article/details/79608282
版权 
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>canvas匀速直线运动</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			canvas {
				border: 1px solid #ddd;
				margin: 10px;
			}
		</style>
	</head>

	<body>
		<canvas id="canvas">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>
		<script>
			var t = ""; //循环定时器
			var inputval = "请输入文本啊66";
			var boxheight = ""; //要运动物体高度的高度
			var cwidth = "";
			var cheight = "";
					var startPoint = "" //运动距离
			window.onload = function() {
				var canvas = document.getElementById('canvas');
				cwidth = canvas.width = 375;         
				cheight = canvas.height = 590;
				var context = canvas.getContext('2d'); //获得画笔
				context.translate(canvas.width / 2, 0)//移动位置
				context.rotate(Math.PI / 2);//旋转角度-180°~180°
				context.font = "bold 40px '字体','字体','微软雅黑','宋体'"; //设置字体（）
				context.textBaseline = 'middle'; //在绘制文本时使用的当前文本基线
				context.fillText(inputval, canvas.height, '0'); //文字及位置(context.font要先设置)
				startPoint = canvas.height;
				boxheight = context.measureText(inputval).width//获取文本水平排列时的宽度
				t = setInterval(function() {
					run(context);
				}, 15);
			};

			function run(cxt) {
				var speed = -1; //每次移动的单位距离
				var clearcwidth = cwidth / 2
				cxt.clearRect(0, -clearcwidth, cheight, cwidth); //清除画布
				startPoint += speed;
				cxt.beginPath();
				cxt.fillStyle = '#000'; //设置笔触的颜色
				cxt.font = "bold 40px '字体','字体','微软雅黑','宋体'"; //设置字体（）
				console.log(startPoint);
				console.log(boxheight);
				if(startPoint <= -boxheight) {
					startPoint = cheight
				}
				cxt.fillText(inputval, startPoint, '0'); //文字及位置(context.font要先设置)
			}
		</script>
	</body>

</html>

dongsdh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas 从上到下的渐变
hugejihu9的专栏
01-09 1005
文章来自：源码在线https://www.shengli.me/h5/554.html       实现效果：      
uniapp通过Canvas绘制网格（心电图，坐标纸等可用）
最新发布
Agont_的博客
05-29 887
通过这段代码，可以将网格的外边距取消，并且将网格的背景颜色改成黑色(或者其他颜色自己喜欢就好)，通过这种改变DIV的背景颜色实现对网格添加背景颜色的方法，有利于我们之后在心电图操作中“显示/隐藏”网格的操作选项。所需要的高级网格需要三种大小的网格，分别为大、中、小，这三种网格需要被同时调用执行，故专写一个函数来共同调用三种大小的绘制函数。我之前文档内的心电图同款网格只需要将小型网格和大型网格函数删除，并且在总函数内，删除对这两个函数的调用即可。同时，将网格的颜色改变，即可实现我之前文档中的心电图同款网格。
基于canvas实现物理运动效果与动画效果(一)
weixin_33716557的博客
04-16 739
一、为什么要写这篇文章  某年某月某时某种原因，我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码，心中很是欣喜，故而写这篇文章来向这位大神致敬，同时也为了弥补自己在运动效果和动画效果制作方面的不足 二、几种简单的直线运动 这一部分主要讲解的是简单的运动效果的实现原理，其实所有的canvas动画效果的实现在核心思想是一致的：都是先定义个初始的状态，然后定义一个定时器，定时器内执行一个...
html5 canvas高并发弹幕
12-23
HTML5 canvas 80行代码实现的高并发弹幕功能，通过拉伸自动适配所有尺寸，已在pc，手机，电视浏览器通过测试，通过jquery插件方式导入
纯js 实现弹幕效果
热门推荐
natural_live的博客
08-02 2万+
弹幕时近几年新兴的一种技术，接下来我要展示的就是怎么实现类似弹幕的效果。 先贴下效果图： 说是效果，要拿出去用肯定是不行的。 先说一下是怎么样的实现方法。弹幕肯定是出现在屏幕上，所以我们暂时把出现弹幕的窗口称为背景。 弹幕肯定尽量不能重叠在一起，所以我把整个弹幕出现的背景划分为几块，如下图： 1 2 3 4 5
Canvas 弹幕功能.zip
08-04
3. **时间循环**：为了实现弹幕的动态移动，我们需要设置一个定时器（如`setInterval`），每隔一定时间更新弹幕的位置，并清除Canvas画布以准备下一次绘制。 4. **碰撞检测**：如果弹幕数量多，可能需要考虑弹幕...
html5使用canvas实现弹幕功能示例
09-27
定时器会周期性地遍历`capObjs`数组，根据每个弹幕对象的属性在Canvas上绘制弹幕。同时，更新弹幕的位置，模拟它们在屏幕上移动的效果。 代码中还涉及到输入框、发送按钮、颜色选择器等交互元素，用于用户输入弹幕...
HTML使用canvas实现弹幕功能
09-28
HTML5 的 Canvas 元素提供了一种强大的方式来在网页上绘制图形和动画，包括动态的文本显示，这使得它成为实现弹幕功能的理想选择。本文将深入探讨如何利用 Canvas 实现一个基本的弹幕播放器，包括文字绘制、滚动效果...
canvas 弹幕效果（实例分享）
08-31
- 如果消息对象已经设置了属性，检查其左边界是否小于-200，如果是，说明弹幕已经离开屏幕，将其置为空，从缓冲池中移除。否则，更新其左边界，向左移动指定的速度值。 - 使用当前消息的颜色和内容在canvas上绘制...
JQuery和HTML5 Canvas实现弹幕效果
10-20
2. **Canvas API**：使用JavaScript的`canvas`对象，通过`getContext('2d')`获取绘图上下文，然后在`drawRect()`、`drawImage()`或`fillText()`等方法中绘制弹幕。 ```javascript var canvas = document....
html5新特性canvas绘制弹幕
10-14
用js封装的弹幕函数,里面有构造函数,用html5的新特性,同时是参考bilili写的，感兴趣的同学可以参考下
如何通过canvas制作视频弹幕
yunduanaoligei的博客
11-22 525
今天分享下”如何通过canvas制作视频弹幕“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 简介 最近在做大作业的时候需要做一个弹幕播放器。借鉴了一下别人的源码自己重新实现了一个，演示如下 主要的功能有 发送弹幕 设置弹幕的颜色，速度和类型 显示弹幕 已知缺陷： 不能全屏 canvas没有做自适应 没有自定义播放器控件 没有根据播放时间显示相应的弹幕 弹幕不能实现悬停 已知的缺陷以后会进行改进。网上能找到的弹幕播
Android实现弹幕效果——BarrageDemo
ss8860524的博客
11-16 1964
很多项目需要用到弹幕效果，尤其是在播放视频的时候需要一起显示别人发的弹幕，也包括自己的发的。 今天就试着写了一下这个效果。                思路就是将从右往左的动画效果，字体内容，字体大小，弹幕平移速度等属性一起与TextView封装成BarrageItem，并将控制效果与BarrageItem绑定在BarrageView进行显示。思路还是比较简单的。这里没有考虑到带有表情的弹幕
分享一个比较简单的canvas+js 飞翔的小鸟小游戏
ZzGGXLXBX的博客
06-23 1973
Document canvas{ border: 1px solid #000; } 对不起,您的浏览器不支持画布,请升级! //版本 1.0 //没有完成的任务 //1,小鸟倾斜 //2,开始画面 //3,2位以上的分数 //4,多个排水管同时出现 var canvas = document.getElementById
HTML5 Canvas 竖版飞行射击游戏的实现
web开发自学
12-19 256
这个游戏本来是想做成东方那个的虐心弹幕游戏的。一是由于本人美工方面的问题，二是阿里云应用开发失败之后我也没有动力继续做下去了。 不过其本身已经是一个相对完整的游戏了，虽然怪物和弹幕类型都比较少，但是想打到很高的分数还是比较困难的。 效果截屏如下： 由于代码比较长，总共有800多行JS代码，而且分为了多个文件，所以我上传到了CSDN资源中，传送门如下： http://download...
canvas实现匀速运动
djz917的博客
06-11 881
话不多说先贴代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;匀速运动&lt;/title&gt; &lt;style type="text/css"&gt; #drawing
img和canvas的相互转换
vcxiaohan的博客
07-30 7988
canvas.toDataURL()跨域问题的解决：http://www.cnblogs.com/ajg016/p/5477557.html video body, html { width: 100%; height: 100%;
JS实现弹幕
失心疯的博客
12-29 3687
JS弹幕实现
canvas实现弹幕
08-12
要在Canvas上实现弹幕效果，可以按照以下步骤进行操作： 1. 创建一个Canvas元素，并使用绝对定位将其覆盖在视频上方。可以使用HTML中的<canvas>标签，通过设置宽度和高度来确定Canvas的大小。 2. 在JavaScript中创建一个Barrage类，该类用于存储弹幕对象并记录相应的弹幕信息。可以使用一个数组来存储弹幕对象。 3. 在Barrage类中，绘制弹幕文本。你可以使用Canvas的绘制文本方法（如fillText）来将弹幕文本绘制在Canvas上。可以设置文本偏移量来控制弹幕的移动速度。 4. 在定时器中，更新弹幕的位置并重新绘制Canvas上的所有弹幕内容。你可以使用一个循环来遍历弹幕数组，更新每个弹幕的X坐标。然后使用Canvas的绘制文本方法将更新后的弹幕绘制在Canvas上。 5. 当弹幕文本超出Canvas范围时，从弹幕数组中移除该弹幕。 下面是一个简单的实现示例： ```javascript let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); ctx.font = '24px Verdana'; class Barrage { constructor(text, x, y, speed, color) { this.text = text; this.x = x; this.y = y; this.speed = speed; this.color = color; } } let barrageList = [ new Barrage('弹幕1', 2000, 24, 1, 'red'), new Barrage('弹幕2', 1900, 48, 3, 'pink'), // 其他弹幕... ]; function updateBarrage() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < barrageList.length; i++) { let barrage = barrageList[i]; barrage.x -= barrage.speed; ctx.fillStyle = barrage.color; ctx.fillText(barrage.text, barrage.x, barrage.y); if (barrage.x < -300) { barrage.x = 2000; } } } setInterval(updateBarrage, 1000 / 60); ``` 在HTML中，你可以放置一个`<div>`元素并在其中嵌入上述Canvas元素： ```html <div> <canvas id="canvas" width="2000" height="240"></canvas> </div> ``` 这样，你就可以在Canvas上实现弹幕效果了。这个示例中的弹幕将从右侧向左侧移动，并循环播放。你可以根据需要进行调整和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [使用canvas如何实现发送视频弹幕，H5 Canvas学习](https://blog.csdn.net/wzsud/article/details/122270259)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Canvas弹幕实现](https://blog.csdn.net/z69183787/article/details/105391669)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [canvas画布的方式实现弹幕](https://blog.csdn.net/wuyoulv/article/details/128639020)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值