gpt4 book ai didi

javascript - 使用 html5 在 Canvas 内移动文本

转载 作者:搜寻专家 更新时间:2023-11-01 05:25:08 26 4
gpt4 key购买 nike

我是 html5 开发的新手,谁能告诉我如何使文本在 Canvas 内水平移动一侧到另一侧。

最佳答案

这是一个如何在屏幕上来回移动文本的示例:

<html>
<head>
<title>HTML 5 Animated Text</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var context;
var text = "";
var textDirection ="";

$(function()
{
context = document.getElementById("cvs").getContext("2d");
setInterval("animate()", 30);

textDirection ="right";
textXpos = 5;
text = "Animation!";
});

function animate() {
// Clear screen
context.clearRect(0, 0, 500, 500);
context.globalAlpha = 1;
context.fillStyle = '#fff';
context.fillRect(0, 0, 500, 500);

var metrics = context.measureText(text);
var textWidth = metrics.width;

if (textDirection == "right") {
textXpos += 10;

if (textXpos > 500 - textWidth) {
textDirection = "left";
}
}
else {
textXpos -= 10;

if (textXpos < 10) {
textDirection = "right";
}
}

context.font = '20px _sans';
context.fillStyle = '#FF0000';
context.textBaseline = 'top';
context.fillText ( text, textXpos, 180);
}
</script>
</head>
<body>
<div id="page">
<canvas id="cvs" width="500" height="500">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
</body>
</html>

在行动中:http://jsfiddle.net/bS79G/

关于javascript - 使用 html5 在 Canvas 内移动文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11450030/

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