Student info: name: john smith id: js123 Create a webpage that include your stud
ID: 3863571 • Letter: S
Question
Student info:
name: john smith
id: js123
Explanation / Answer
1) snowing.js
function startSnowing(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var Width = 1024;
var Height = 800;
canvas.width = Width;
canvas.height = Height;
var maxSize = 25;
var particles = [];
for(var i = 0; i < maxSize; i++)
{
particles.push({
x: Math.random()*Width,
y: Math.random()*Height,
r: Math.random()*4+1,
d: Math.random()*maxSize
})
}
//This method will draw the flakes
function draw()
{
ctx.clearRect(0, 0, Width, Height);
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
ctx.beginPath();
for(var i = 0; i < maxSize; i++)
{
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
}
ctx.fill();
update();
}
//this Function will move the snowflakes
var angle = 0;
function update()
{
angle += 0.01;
for(var i = 0; i < maxSize; i++)
{
var p = particles[i];
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
p.x += Math.sin(angle) * 2;
if(p.x > Width+5 || p.x < -5 || p.y > Height)
{
if(i%3 > 0)
{
particles[i] = {x: Math.random()*Width, y: -10, r: p.r, d: p.d};
}
else
{
if(Math.sin(angle) > 0)
{
particles[i] = {x: -5, y: Math.random()*Height, r: p.r, d: p.d};
}
else
{
particles[i] = {x: Width+5, y: Math.random()*Height, r: p.r, d: p.d};
}
}
}
}
}
setInterval(draw, 33);
}
function stopSnowing(){
location.reload();
}
2) HTML code
<html>
<head>
<script src="snowing.js"></script>
<style>
body {
background: #6b92b9;
}
canvas {
display: block;
}
</style>
</head>
<body >
<div>
Name: john smith<br/>
Id: js123
</div>
<table>
<tr>
<td><input type="button" Value="Start Snowing"/></td>
<td><input type="button" Value="Stop Snowing" /></td>
</tr>
</table>
<div>
<canvas id="canvas"></canvas>
</div>
</body>
</html>