Cut And
Paste Code For Lesson 4
Draw A Circle Code:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
width="200" height="100" style="border:1px solid #d3d3d3;">
Your
browser does not support the HTML5 canvas tag.</canvas>
<script>
var
c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
Add A Loop To The Circle Code For Fun!
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
width="200" height="100" style="border:1px solid #d3d3d3;">
Your
browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var
ctx = c.getContext("2d");
ctx.beginPath();
var radious;
for(radious=10; radious>=0; radious= radious-1){
ctx.arc(95,50,radious,0,2*Math.PI);
}
ctx.stroke();
</script>
</body>
</html>
Swap Images When a Key is Pressed:
<!DOCTYPE html>
<html>
<body>
<img id="myImage"
onclick="changeImage()" src="http://www.noonco.com/rc/grumpy_01.jpg"
width="600" height="450">
<script>
function
changeImage() {
var image = document.getElementById('myImage');
if
(image.src.match("grumpy_02")) {
image.src
= "http://www.noonco.com/rc/grumpy_01.jpg";
}
else {
image.src = "http://www.noonco.com/rc/grumpy_02.jpg";
}
}
</script>
</body>
</html>