gpt4 book ai didi

Javascript Canvas 动画

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

我想为我的网络应用程序制作一个加载栏,我想为此使用 html Canvas 。这是我用来填充 Canvas 的脚本:

<script>
var canvas = document.getElementById("bar");
var c = canvas.getContext("2d");

var xPos = 0;

draw = function() {
if(xPos < 300){
c.rect(0, 0, xPos, 30);
c.fill(255,0,0);
xPos += 0.5;
}
};
</script>

我在在线代码转换器(可汗学院)上测试了这段代码并且它有效(当然没有前两行和 c. 在大多数事情前面),这也是我的麻烦我不知道我在哪里必须放c。在前面?

我稍微简化了页面:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<canvas id="bar"></canvas>
<script>
var canvas = document.getElementById("bar");
var c = canvas.getContext("2d");

c.fillStyle = "#ff0000"

draw = function(){
if(xPos < 300){
c.fillRect(0, 0, xPos, 30);
xPos += 0.5;
}
};
</script>
</body>
</html>

最佳答案

无论你想画什么......这个:

draw = function(){
if(xPos < 300) {
c.fillRect(0, 0, xPos, 30);
xPos += 0.5;
}
};

... 它是全局上下文(window 对象的上下文)中变量的定义,然后为其分配一个函数。仅此而已 - 它仅定义行为。

您还需要执行那个(旁注:在实际创建 Canvas 后执行它 - 当您将代码放入脚本 标签在 canvas 标签之后 - 这已经足够了,你已经做到了)。

要执行函数使用:

draw();

或者根本不要将代码包装在函数中(除非它被多次调用)。

或者使用语法构造来执行就地创建的函数,如下所示:

(draw = function(){
if(xPos < 300) {
c.fillRect(0, 0, xPos, 30);
xPos += 0.5;
setTimeout(draw,15); // use this to achieve animation effect
}
})();

var xPos = 0;
var canvas = document.getElementById("bar");
var c = canvas.getContext("2d");
c.fillStyle = "#FF0000";

var draw;
(draw = function(){
if(xPos < 300) {
c.fillRect(0, 0, xPos, 30);
xPos += 0.5;
setTimeout(draw,15);
}
})();
#bar {
width: 300px;
height: 50px;
}
<canvas id="bar"></canvas>

编辑:我一直在考虑您可能需要什么,因为您并不完全清楚您想要什么。我创建了 this jsfiddle .也许它会有所帮助。

关于Javascript Canvas 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26576787/

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