HTML and CSS Reference
In-Depth Information
ctxt.clearRect(0, 0, c.width, c.height);
ctxt.beginPath();
ctxt.lineWidth = "5";
ctxt.strokeStyle = rgbStroke;
ctxt.arc(x, y, r, 0, 360);
ctxt.fillStyle = rgbFill;
ctxt.fill();
ctxt.stroke();
s = parseInt( document.getElementById("speedy").value);
requestAnimFrame(function () {
drawBall();
});
} catch (e) {
alert(e.message);
}
}
</script>
</head>
<body>
<canvas id="c" width="1200" height="800" style="border: 2px solid black;
position: absolute; top: 50px; left: 50px;"></canvas>
<input id="intensiveWork" type="button" value="Do Work" /><span
id="workResult"></span>
<input id="speedy" type="range" min="0" max="10" value="10"
style="position:relative; visibility:hidden;" step="1"/>
</body>
</html>
This code simply displays a small ball bouncing around inside a canvas. Users can use the
arrow keys to change the ball's direction. Users would expect a smooth experience. Now
you can introduce an intensive mathematical operation to occur at the click of a button. The
button is on the form already and is called
intensiveWork
. Add the following function to the
bottom of the script block to do some intense math:
function DoIntensiveWork() {
var result = document.getElementById("workResult");
result.innerText = "";
var work = 10000000;
var i = 0;
var a = new Array(work);
var sum=0;
for (i = 0; i < work; i++) {
a[i] = i * i
sum += i * i;
}
result.innerText = sum;
}
This function does nothing more than calculate the sum of a series of squares and display
the result to users. The amount of work to do is hard coded in this example but could be
extended to get the information from users as well.
Search WWH ::
Custom Search