Fatal编程技术网
  • javascript/
  • Javascript 无法使用HTML5画布动画将文本放入框中

Javascript 无法使用HTML5画布动画将文本放入框中

javascript html canvas

Javascript 无法使用HTML5画布动画将文本放入框中,javascript,html,canvas,Javascript,Html,Canvas,我在该框中添加文本时遇到问题。我使用“HTML5”画布动画从左到右滑动框，但我试图在其中放入一些文本。我试着把 有很多语法，但无法做到这一点。怎么办 代码： 身体{ 边际：0px； 填充：0px； } window.requestAnimFrame=（函数（回调）{ 返回window.requestAnimationFrame | | window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame | | | win

我在该框中添加文本时遇到问题。我使用“HTML5”画布动画从左到右滑动框，但我试图在其中放入一些文本。我试着把 有很多语法，但无法做到这一点。怎么办

代码：


身体{
边际：0px；
填充：0px；
}
window.requestAnimFrame=（函数（回调）{
返回window.requestAnimationFrame | | window.webkitRequestAnimationFrame | |
window.mozRequestAnimationFrame | | | window.oRequestAnimationFrame | | | window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
函数drawRectangle（myRectangle，context）{
context.beginPath（）；
rect（myRectangle.x，myRectangle.y，myRectangle.width，myRectangle.height）；
context.fillStyle='#8ED6FF'；
context.fill（）；
context.lineWidth=myRectangle.borderWidth；
context.strokeStyle='black'；
stroke（）；
}
函数动画（myRectangle、canvas、context、startTime）{
//更新
var time=（new Date（））.getTime（）-startTime；
变量线性速度=50；
//像素/秒
var newX=线性速度*时间/1000；
if（newX
我刚刚在您的drawRectangle函数中添加了以下语句：

context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("Zibri", myRectangle.x, myRectangle.y + 30);
没有optimus:），但现在可以开始重构：） 供参考

fillText（）

使用字体指定的文字样式绘制指定文字 属性、textAlign属性指定的对齐方式以及 textBaseline指定的基线。文本使用 当前fillStyle和strokeStyle将被忽略


身体{
边际：0px；
填充：0px；
}
window.requestAnimFrame=（函数（回调）{
返回window.requestAnimationFrame | | window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame | | | window.oRequestAnimationFrame | | | window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
函数drawRectangle（myRectangle，context）{
context.beginPath（）；
rect（myRectangle.x，myRectangle.y，myRectangle.width，myRectangle.height）；
context.fillStyle='#8ED6FF'；
context.fill（）；
context.lineWidth=myRectangle.borderWidth；
context.strokeStyle='black'；
stroke（）；
context.font=“bold 16px Arial”；
var myText=“Zibri”；
var centerX=myRectangle.width/2-（context.measureText（myText.width/2）；
var centerY=myRectangle.height/2；
fillText（myText，myRectangle.x+（centerX），myRectangle.y+centerY）；
}
函数动画（myRectangle、canvas、context、startTime）{
//更新
var time=（new Date（））.getTime（）-startTime；
变量线性速度=50；
//像素/秒
var newX=线性速度*时间/1000；
if（newX
还有一件事，如果我希望文本位于中间，那么是否还需要其他语法…？您可以使用ctx.measureText（text）.width来获取文本的宽度，这样您就可以轻松计算文本的确切位置。明白了。。谢谢你的帮助：D 
context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("Zibri", myRectangle.x, myRectangle.y + 30);

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
        window.requestAnimFrame = (function (callback) {
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
             window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
        })();

        function drawRectangle(myRectangle, context) {
            context.beginPath();
            context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
            context.fillStyle = '#8ED6FF';
            context.fill();
            context.lineWidth = myRectangle.borderWidth;
            context.strokeStyle = 'black';
            context.stroke();
            context.font = "bold 16px Arial";
            var myText = "Zibri";
            var centerX = myRectangle.width / 2 - (context.measureText(myText).width / 2);
            var centerY = myRectangle.height / 2;

            context.fillText(myText, myRectangle.x + (centerX), myRectangle.y + centerY);
        }
        function animate(myRectangle, canvas, context, startTime) {
            // update
            var time = (new Date()).getTime() - startTime;

            var linearSpeed = 50;
            // pixels / second
            var newX = linearSpeed * time / 1000;

            if (newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
                myRectangle.x = newX;
            }

            // clear
            context.clearRect(0, 0, canvas.width, canvas.height);

            drawRectangle(myRectangle, context);

            // request new frame
            requestAnimFrame(function () {
                animate(myRectangle, canvas, context, startTime);
            });
        }
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        var myRectangle = {
            x: 0,
            y: 75,
            width: 100,
            height: 50,
            borderWidth: 5
        };

        drawRectangle(myRectangle, context);

        // wait one second before starting animation
        setTimeout(function () {
            var startTime = (new Date()).getTime();
            animate(myRectangle, canvas, context, startTime);
        }, 1000);
    </script>
</body>
</html>