[英]Javascript canvas animating
I want to make a loading bar for my web application and I want to use a html canvas for this. 我想为我的Web应用程序制作一个加载栏,并且我想为此使用html canvas。 This is the script that I use to fill up the 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>
I tested this code on a online code converter (khan academy) and it worked (of course without the first 2 lines and c. in front of most things), and that is also my trouble I don't know where I have to put c. 我在在线代码转换器(可汗学院)上测试了此代码,并且该代码有效(当然,在大多数情况下没有前两行和c),这也是我的麻烦,我不知道该放在哪里C。 in front of? 在...前面?
I simplified the page a little bit: 我简化了页面:
<!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>
Whatever you are trying to draw... this: 无论您想画什么...
draw = function(){
if(xPos < 300) {
c.fillRect(0, 0, xPos, 30);
xPos += 0.5;
}
};
... it is a definition of variable in global context (context of window
object), then assigning a function to it. ...它是全局上下文( window
对象的上下文)中变量的定义 ,然后为其分配功能。 That's all - it only defines the behavior. 仅此而已-它仅定义行为。
What you need also needs to execute that (a sidenote : to execute it after the canvas is actually created - when you put code in a script
tag after canvas tag - it's sufficient and you did it already). 您还需要执行该操作(一个旁注 :在实际创建画布之后执行该操作-将代码放在canvas标签之后的script
标签中-足够并且您已经做到了)。
To execute the function use: 要执行该功能,请使用:
draw();
Or don't wrap code in function at all (unless it's to be called multiple times). 或者根本不将代码包装在函数中(除非被多次调用)。
Or use a syntax construct to execute the function created in place like this: 或使用语法构造来执行就地创建的函数,如下所示:
(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>
Edit : I've been thinking of what you might need, as it's not entirely abvious what you want. 编辑 :我一直在想您可能需要什么,因为它并不完全是您想要的。 I have created this jsfiddle . 我已经创建了这个jsfiddle 。 Maybe it'll be of any help. 也许会对您有帮助。
Hmmm... 嗯...
You got some things mixed up. 你把一些事情弄混了。 Try this: 尝试这个:
<html>
<canvas id = "cvs1" width = "300" height = "30"></canvas>
</html>
And for the script: 对于脚本:
var c = document.getElementById("cvs1").getContext("2d");
c.fillStyle = "#ff0000" //Set Fill Color(Set to red)
if(xPos < 300){
c.fillRect(xPos, 0, 30, 30);
xPos += 0.5;
}
If not: 如果不:
What you did was use fill and rect seperately. 您所做的是分别使用填充和校正。 You need to set the color, and then use the fillRect() function to draw the rectangle. 您需要设置颜色,然后使用fillRect()函数绘制矩形。
EDIT: You got the x,y,width,height as width,height,x,y. 编辑:您得到x,y,宽度,高度作为宽度,高度,x,y。 Fixed answer. 固定答案。
Good luck! 祝好运!
You need to call draw
for every animation step. 您需要为每个动画步骤调用draw
。 You could do this using setTimeout
, setInterval
or requestAnimationFrame
: 您可以使用setTimeout
, setInterval
或requestAnimationFrame
来做到这一点:
<!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";
xPos=0;
draw = function(){
if(xPos < 300){
c.fillRect(0, 0, xPos, 30);
xPos += 0.5;
requestAnimationFrame(draw);
}
};
requestAnimationFrame(draw);
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.