用一个canvas画布写了一个动态小球运功，但是上面写的静态就不显示了，这是怎么回事？只有刷新的一瞬间会看见，求大神帮忙解决啊<!DOCTYPE html><html><head> <title>demo</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/><style type="text/css">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><body style=""> <div class="out"> <canvas id="demo" width="640px" height="867px" ></canvas> </div> <script type="text/javascript"> 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><script type="text/javascript"> 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>
- 1 回答
- 0 关注
- 1489 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消