gpt4 book ai didi

javascript - html5 Canvas 文本动画新闻自动收报机

转载 作者:行者123 更新时间:2023-11-30 17:47:07 25 4
gpt4 key购买 nike

我在这里找到了这段代码: https://github.com/shinstudio/html5_myown_party/blob/master/news_ticker/index.html

我需要将自动收报机滚动条从右改为左。

Canvas js代码:

<div id="border">
<canvas id="bannershow" width="500" height="150" />
</div>

var globalx = 0;
var vector = 1;
var interval = 120;
var canvas = document.getElementById('bannershow');
var ctx = canvas.getContext('2d');
var fontsize = 80;
var canvasHeight = 150;
var canvasWidth = 500;

function banner(label) {

ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect (0, 0, canvasWidth, canvasHeight);

ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'
ctx.font = fontsize + 'px Helvetica';
ctx.textBaseline = 'top';

if (globalx > canvasWidth) {
globalx = ctx.measureText(label).width * -1;
}
ctx.fillText(label, globalx, (canvasHeight-fontsize)/2);

globalx += vector;
}
setInterval(banner, 1000/interval, 'Helvetica is the new font');

最佳答案

http://jsfiddle.net/t74ww/1/

var globalx = 500;
var vector = -1;
var interval = 120;
var canvas = document.getElementById('bannershow');
var ctx = canvas.getContext('2d');
var fontsize = 80;
var canvasHeight = 150;
var canvasWidth = 500;

function banner(label) {

ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect (0, 0, canvasWidth, canvasHeight);

ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'
ctx.font = fontsize + 'px Helvetica';
ctx.textBaseline = 'top';
if (globalx < 0 - ctx.measureText(label).width) {
globalx = canvasWidth;
}
ctx.fillText(label, globalx, (canvasHeight-fontsize)/2);

globalx += vector;
}
setInterval(banner, 1000/interval, 'Helvetica is the new font');

只需更改 vector = -1 和 globalx = 500。vector 负责水平滚动的方向,globalx 是呈现文本的起点(在 x 轴上)。更改这些变量比更改函数更好。事实上,动画是由这个设置/变量控制的。

干杯

关于javascript - html5 Canvas 文本动画新闻自动收报机,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19922474/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com