2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

如果你想做逐幀動(dòng)畫的時(shí)候，你應(yīng)該用這個(gè)方法。這就要求你的動(dòng)畫函數(shù)執(zhí)行會(huì)先于瀏覽器重繪動(dòng)作。通常來(lái)說(shuō)，被調(diào)用的頻率是每秒60次，但是一般會(huì)遵循W3C標(biāo)準(zhǔn)規(guī)定的頻率。如果是后臺(tái)標(biāo)簽頁(yè)面，重繪頻率則會(huì)大大降低。

?

var canvas=document.getElementById("canvas");var ctx=canvas.getContext('2d');var running=false; // get requestAnimationFramefunction AFrame(callback){return window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;}var raFrame=AFrame();var raf;var ball={x:100,y:100,vx:5,vy:1,radius:25,color:'blue',draw:function(){ctx.beginPath();ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);ctx.closePath();ctx.fillStyle=this.color;ctx.fill();}};function clear(){ctx.fillStyle=ctx.fillStyle = 'rgba(255,255,255,0.3)';ctx.fillRect(0,0,canvas.width,canvas.height);}function draw(){ // ctx.fillStyle = 'rgba(255,255,255,0.3)'; // ctx.fillRect(0,0,canvas.width,canvas.height); // ctx.clearRect(0,0,canvas.width,canvas.height);//每次畫之前清除上一次的clear();ball.draw();ball.x += ball.vx;ball.y += ball.vy;if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {ball.vy = -ball.vy;}if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {ball.vx = -ball.vx;}raf= raFrame(draw);console.log("運(yùn)行")}canvas.addEventListener('mousemove',function(e){if(!running){clear();ball.x = e.clientX;ball.y = e.clientY;ball.draw();} // raf=raFrame(draw);});canvas.addEventListener("click",function(e){if (!running) {raf=raFrame(draw);running = true;}});canvas.addEventListener('mouseout',function(e){window.cancelAnimationFrame(raf);running = false;});ball.draw();

轉(zhuǎn)載于:https://my.oschina.net/swmhxhs/blog/1490483

總結(jié)

以上是生活随笔為你收集整理的canvas requestAnimationFrame 动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。