用一個(gè)canvas畫(huà)布寫(xiě)了一個(gè)動(dòng)態(tài)小球運(yùn)功，但是上面寫(xiě)的靜態(tài)就不顯示了，這是怎么回事？只有刷新的一瞬間會(huì)看見(jiàn)，求大神幫忙解決啊<!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>
canvas滾動(dòng)小球與canvas靜態(tài)頁(yè)面不能同時(shí)顯示嗎？
沒(méi)事兒打打殺殺
2017-04-13 18:02:45
