Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!DOCTYPE HTML> <html> <head> <script src="./CanvasTester.js"></script> </head> <body onload="window.newBenchmark=CanvasBenchmark({canvas:document.getElementById('mainC'),minFPS:20,maxTileSize:30,maxSpeed:200});newBenchmark.onEnd=function(){document.getElementById('tiles').innerHTML=newBenchmark.maxTiles};newBenchmark.play()"> <style> body {margin:0;display:flex;height:100vh;width:100vw} #mainC {display:block;margin:auto;vertical-align:center;} </style> <canvas id="mainC" height=300 width=300></canvas> <div id="tiles" style="font-size:50px"></div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
CSS
Autoformát
CSS reset
Až na konci
var CanvasBenchmark=(function() { var Benchmark=function(settings) { var a={get tiles(){return t.length},get FPS(){return FPS}}; var c=settings.canvas; var d=c.getContext("2d"); var testing=false; a.play=function(){if(!testing){testing=true;date=new Date();anim();}}; a.pause=function(){testing=false}; a.addTiles=true; var t=[]; var date; var FPS=Infinity; function anim() { if(!testing)return; d.globalAlpha=1; d.fillStyle="#ffffff"; d.fillRect(0,0,c.width,c.height); d.globalAlpha=0.5 d.beginPath(); //smaž for(var i=t.length-1;i>=0;i--) { //d.beginPath(); d.moveTo(t[i][0]+t[i][2],t[i][1]); d.ellipse(t[i][0],t[i][1],t[i][2],t[i][2],0,Math.PI*2,0,0); //d.fillStyle="#"+t[i][3]; //d.fill(); //d.closePath(); t[i][0]+=t[i][4]*(new Date()-date)/1000; t[i][1]+=t[i][5]*(new Date()-date)/1000; if(t[i][0]<0-t[i][2])t[i][0]=c.width+t[i][2]; if(t[i][1]<0-t[i][2])t[i][1]=c.height+t[i][2]; if(t[i][0]>c.width+t[i][2])t[i][0]=0-t[i][2]; if(t[i][1]>c.height+t[i][2])t[i][1]=0-t[i][2]; } d.closePath();//smaž d.stroke();//smaž if(FPS>settings.minFPS)requestAnimationFrame(anim); else { a.maxTiles=t.length; if(typeof a.onEnd === "function")a.onEnd(); return; } FPS=Math.round(1000/(new Date()-date)); date=new Date(); if(a.addTiles)t.push([Math.round(Math.random()*c.width),Math.round(Math.random()*c.height),Math.round(Math.random()*settings.maxTileSize+1),Math.round(Math.random()*16777215).toString(16),Math.random()*settings.maxSpeed-settings.maxSpeed/2,Math.random()*settings.maxSpeed-settings.maxSpeed/2]); } return a; } return Benchmark; })()
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>