canvas滚动小球与canvas静态页面不能同时显示吗？

首页课程实战体系课手记专栏慕课教程

canvas滚动小球与canvas静态页面不能同时显示吗？

用一个canvas画布写了一个动态小球运功，但是上面写的静态就不显示了，这是怎么回事？只有刷新的一瞬间会看见，求大神帮忙解决啊

<!DOCTYPE html>

<html>

<head>

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background:url(style/images/img/bgg.jpg);

background-position:center 0px;

background-repeat:no-repeat;

}

.out{

width: 640px;

height:867px;

margin: 20px auto;

}

</style>

</head>

</div>

window.onload=function(){

var canvas=document.getElementById('demo');

var context=canvas.getContext('2d');

context.width=640;

context.width=867;

context.beginPath();

context.moveTo(8,50);

context.lineTo(632,50);

context.lineTo(632,733);

context.lineTo(8,733);

context.closePath();

context.lineWidth=20;

var radial = context.createRadialGradient(300, 400, 0, 300, 400, 600);

radial.addColorStop(0.0, '#0C8F8A');

radial.addColorStop(0.5, '#095855');

radial.addColorStop(1.0, 'black');

context.fillStyle=radial;

context.fill();

context.strokeStyle="#652702";

context.stroke();

for(i=0;i<11;i++){

var x=30+i*50;

drawJu(context,x,600,15,80);

}

context.beginPath();

context.rect(565,200,15,525);

context.closePath();

context.lineWidth=2;

context.fillStyle="#d5d5d5";

context.strokeStyle="#000";

context.fill();

context.stroke();

for(i=0;i<11;i++){

var x=30+i*52;

drawCircle(context,x,530);

}

for(i=0;i<10;i++){

var x=50+i*52;

drawCircle(context,x,480);

}

for(i=0;i<11;i++){

var x=30+i*52;

drawCircle(context,x,430);

}

for(i=0;i<10;i++){

var x=50+i*52;

drawCircle(context,x,380);

}

for(i=0;i<11;i++){

var x=30+i*52;

drawCircle(context,x,330);

}

for(i=0;i<10;i++){

var x=50+i*52;

drawCircle(context,x,280);

}

for(i=0;i<7;i++){

var x=130+i*52;

drawCircle(context,x,230);

}

context.font="bold 12px Arial";

context.fillStyle="yellow";

context.fillText("100",50,630);

context.fillText("50",155,630);

context.fillText("100",250,630);

context.fillText("50",355,630);

context.fillText("100",450,630);

for(i=0;i<5;i++){

var x=54+i*100;

context.fillText("元",x,650);

}

function drawJu(cxt,x,y,width,height){

cxt.beginPath();

cxt.rect(x,y,width,height);

cxt.closePath();

cxt.shadowColor="#000";

cxt.shadowOffsetX=2;

cxt.shadowOffsetY=2;

cxt.shadowBlur=5;

cxt.lineWidth=1;

cxt.fillStyle="#d5d5d5";

cxt.strokeStyle="#000";

cxt.fill();

cxt.stroke();

}

function drawCircle(cxt,centerx,centery){

cxt.beginPath();

cxt.arc(centerx,centery,12,0,2*Math.PI);

cxt.closePath();

cxt.lineWidth=2;

cxt.fillStyle="#d5d5d5";

cxt.fill();

}

</script>

var ball={x:512,y:100,r:20,g:2,vx:-4,vy:-5,color:"#005588"}; // g:速度

window.onload=function(){

var canvas = document.getElementById("demo");

width = canvas.width = 1024;

height = canvas.height = 768;

var context = canvas.getContext("2d");

time = 30;

setInterval(function(){

render(context);

update();

},time)

}

function update(){

ball.x+=ball.vx;

ball.y+=ball.vy;

ball.vy+=ball.g;

if(ball.y>=768-ball.r){

ball.y=768-ball.r;

ball.vy=-ball.vy*0.5;

}

function render(cxt){

cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);

cxt.beginPath();

cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);

cxt.closePath();

cxt.fill();

}

</script>

</body>

</html>

没事儿打打杀杀

浏览 1490回答 1

1回答

西兰花伟大炮

没有懂你的意思，贴下代码吧

0 0

随时随地看视频慕课网APP