Javascript HTML5画布图像不';别动
我有个问题。我正在使用HTML5和Javascript在画布上绘制一个框。该框应该上下移动,但在第一次渲染后,它不希望在新位置重新渲染。代码如下:Javascript HTML5画布图像不';别动,javascript,html,image,Javascript,Html,Image,我有个问题。我正在使用HTML5和Javascript在画布上绘制一个框。该框应该上下移动,但在第一次渲染后,它不希望在新位置重新渲染。代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sl" lang="sl">
<head>
<title>Spletna stran Portfolio - Domaca stran</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script>
var isMoving = true;
var gradienty = 0;
var gradientheight = 100;
var gradientyVel = 1;
var gradientImage = new Image();
gradientImage.src = "grafika/gradient.gif";
function main() {
var c = document.getElementById("menuCanvas");
var ctx = c.getContext("2d");
ctx.drawImage(gradientImage, 0, gradienty);
if(isMoving == true) {
gradienty += gradientyVel;
if((gradienty+gradientheight)==c,height || gradienty<=0) {
gradientyVel *= -1;
}
}
}
function mainLoop() {
setInterval(main(), 10);
}
</script>
</head>
<body onload="mainLoop()">
<canvas id="menuCanvas" width="195" height="400"></canvas>
</body>
</html>
Spletna stran投资组合-Domaca stran
var isMoving=真;
var梯度y=0;
var梯度高度=100;
var gradientyVel=1;
var gradientImage=新图像();
gradientImage.src=“grafika/gradient.gif”;
函数main(){
var c=document.getElementById(“menuCanvas”);
var ctx=c.getContext(“2d”);
ctx.drawImage(梯度图像,0,梯度);
如果(isMoving==true){
梯度y+=梯度yvel;
如果((gradienty+gradientheight)=c,height | | gradienty您正在调用main
,然后将结果传递给setInterval
。只需更改即可
function mainLoop() {
setInterval(main(), 10);
}
到
这将让您开始,但您还需要清除绘制之间的画布。(如果运行此操作,您会注意到)一些编码问题:
您需要给图像加载时间,然后启动动画
var gradientImage = new Image();
gradientImage.onload=function(){
setInterval(main, 20);
}
gradientImage.src = "house16x16.png";
setInterval接受函数指针(无括号):
setInterval将以16ms的速度启动,因此您的10ms值太小
setInterval(main, 20);
下面是修订后的代码和演示:
正文{背景色:象牙;}
画布{边框:1px纯红;}
$(函数(){
var c=document.getElementById(“menuCanvas”);
var ctx=c.getContext(“2d”);
var isMoving=真;
var梯度y=0;
var梯度高度=100;
var gradientyVel=1;
var gradientImage=新图像();
gradientImage.onload=函数(){
设置间隔(主,20);
}
gradientImage.src=“house16x16.png”;
函数main(){
ctx.clearRect(0,0,c.宽度,c.高度);
ctx.drawImage(梯度图像,0,梯度);
如果(isMoving==true){
梯度y+=梯度yvel;
如果((梯度Y+梯度高度)=c.高度| |梯度Y
setInterval(main, 20);
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var c=document.getElementById("menuCanvas");
var ctx=c.getContext("2d");
var isMoving = true;
var gradienty = 0;
var gradientheight = 100;
var gradientyVel = 1;
var gradientImage = new Image();
gradientImage.onload=function(){
setInterval(main, 20);
}
gradientImage.src = "house16x16.png";
function main() {
ctx.clearRect(0,0,c.width,c.height);
ctx.drawImage(gradientImage, 0, gradienty);
if(isMoving == true) {
gradienty += gradientyVel;
if((gradienty+gradientheight)==c.height || gradienty<=0) {
gradientyVel *= -1;
}
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="menuCanvas" width=300 height=300></canvas>
</body>
</html>