S2
jS
Learn
Create Your Own
Split Screen
Go to Live Site
Next Page
You might want to play around and make your own programs using what you've learned so far. Click the button to
register a userid
, and log on to
copy this program to your own work area
.
<HTML> <head> <title> My new Web Page </title> </head> <body> <canvas id=myCanvas width=300 height=300 style="background-color: pink;"> </canvas> <script> var ctx = myCanvas.getContext("2d"); function fillCircle (x, y, radius, colour) { ctx.beginPath(); ctx.fillStyle= colour; ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fill(); } fillCircle(50, 250, 40, "blue"); fillCircle(200,50, 20, "green"); fillCircle(200, 200, 60, "brown"); for (var x=10; x < 300; x= x + 20) { fillCircle(x, 290, 10, "yellow"); } for (var corner= 0; corner < 100; corner= corner+5) { if (corner < 50) { ctx.strokeStyle= "green"; } else { ctx.strokeStyle= "red"; } ctx.strokeRect(corner, corner, 50, 50); } </script> </body> </html>