159 lines
3.2 KiB
HTML
159 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta charset=utf-8 />
|
|
<title>HTML5 Demo: Worker</title>
|
|
<style>
|
|
body {
|
|
font: normal 16px/20px Helvetica, sans-serif;
|
|
background: rgb(237, 237, 236);
|
|
margin: 0;
|
|
margin-top: 40px;
|
|
padding: 0;
|
|
}
|
|
|
|
article, section, header, footer {
|
|
display: block;
|
|
}
|
|
|
|
#wrapper {
|
|
width: 600px;
|
|
margin: 0 auto;
|
|
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
|
-moz-border-radius: 10px;
|
|
-webkit-border-radius: 10px;
|
|
border-top: 1px solid #fff;
|
|
padding-bottom: 76px;
|
|
}
|
|
|
|
h1 {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 100%;
|
|
font-style: italic;
|
|
}
|
|
|
|
header,
|
|
article > *,
|
|
footer a,
|
|
footer p {
|
|
margin: 20px;
|
|
}
|
|
|
|
footer > * {
|
|
margin: 20px;
|
|
color: #999;
|
|
}
|
|
|
|
article {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section id="wrapper">
|
|
<header>
|
|
<h1>Worker</h1>
|
|
</header>
|
|
<article>
|
|
<p>Canvas is running whilst an prime number finder runs in a worker</p>
|
|
<p>Prime found: <span id="status">0</span></p>
|
|
<div><input type="button" value="start worker" id="toggleWorker" /></div>
|
|
</article>
|
|
<footer><a href="/">HTML5 demo</a></footer>
|
|
</section>
|
|
<script src="h5utils.js"></script>
|
|
<script>
|
|
|
|
buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
|
|
|
|
var w = new Worker('cruncher.js');
|
|
|
|
addEvent(document.getElementById('toggleWorker'), 'click', function () {
|
|
w.postMessage('');
|
|
});
|
|
|
|
w.onmessage = function (event) {
|
|
if (event.data && (event.data+"").match(/^log:/i)) {
|
|
console.log(event.data.match(/^log:\s*(.*)/)[1]);
|
|
} else {
|
|
document.querySelector('#status').innerHTML = event.data;
|
|
}
|
|
}
|
|
|
|
function buildSpinner(data) {
|
|
|
|
var canvas = document.createElement('canvas');
|
|
canvas.height = 100;
|
|
canvas.width = 300;
|
|
document.querySelector('article').appendChild(canvas);
|
|
var ctx = canvas.getContext("2d"),
|
|
i = 0, degrees = data.degrees, loops = 0, degreesList = [];
|
|
|
|
for (i = 0; i < degrees; i++) {
|
|
degreesList.push(i);
|
|
}
|
|
|
|
// reset
|
|
i = 0;
|
|
|
|
// so I can kill it later
|
|
window.canvasTimer = setInterval(draw, 1000/degrees);
|
|
|
|
function reset() {
|
|
ctx.clearRect(0,0,100,100); // clear canvas
|
|
|
|
var left = degreesList.slice(0, 1);
|
|
var right = degreesList.slice(1, degreesList.length);
|
|
degreesList = right.concat(left);
|
|
}
|
|
|
|
function draw() {
|
|
var c, s, e;
|
|
|
|
var d = 0;
|
|
|
|
if (i == 0) {
|
|
reset();
|
|
}
|
|
|
|
ctx.save();
|
|
|
|
d = degreesList[i];
|
|
c = Math.floor(255/degrees*i);
|
|
ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
|
|
ctx.lineWidth = data.size;
|
|
ctx.beginPath();
|
|
s = Math.floor(360/degrees*(d));
|
|
e = Math.floor(360/degrees*(d+1)) - 1;
|
|
|
|
ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
|
|
ctx.stroke();
|
|
|
|
ctx.restore();
|
|
|
|
i++;
|
|
if (i >= degrees) {
|
|
i = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
<script>
|
|
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
|
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
|
</script>
|
|
<script>
|
|
try {
|
|
var pageTracker = _gat._getTracker("UA-1656750-18");
|
|
pageTracker._trackPageview();
|
|
} catch(err) {}</script>
|
|
</body>
|
|
</html>
|