Diskussion:HTML, CSS och Javascript
Det nya ritprogrammet
Funkar inte!
| Uppgift |
|---|
Ritprogrammet
 Ta koden nedan och förbättra till ett fantastiskt ritprogram. Det innebär att du lägger in fler färger, förklarande bokstäver och mousover-funktioner. Du kommer att kopiera från den befintliga koden och ändra vissa parametrar. När du gör detta kommer du att lära dig mer programmering. Spara koden som en fil av typen .html. Lämna in på Progress, F3. |
Observera att denna kod inte fungerar riktigt i Safari. Använd Chrome.
Lista: (klicka expandera till höger)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="500"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script src="http://spelprogrammering.nu/simple.js">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x0 = 50;
y0 = 30;
bredd =40;
hojd = 40;
distance = 40;
color = "green";
radie = 10;
size = 22;
function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}
function myCircle(x, y, r, t, color) {
ctx.beginPath();
ctx.arc(x,y,r,t, 2.2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}
function myText(x, y, size, text, color)
{
ctx.font = size + "pt Helvetica";
ctx.fillStyle = color;
ctx.fillText(text, x, y);
}
function update()
{
// rita de färgade rutorna
this.myRectangle(x0, y0, bredd, hojd, "green");
this.myRectangle(x0, y0 + distance, bredd, hojd, "blue");
this.myText(x0-30, y0 + distance+25, 18, "b", "blue");
this.myRectangle(x0, y0 + 2 * distance, bredd, hojd, "yellow");
this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink");
// rita med vald färg
if(mouse.left)
{
this.myCircle(mouse.x, mouse.y, radie, 2,color);
}
// sudda med vit färg genom högerklick
if(mouse.right)
{
this.myCircle(mouse.x, mouse.y, radie, 2,"white");
}
// välj färg att rita med
if ((mouse.x > x0) && (mouse.x < x0 + bredd) && (mouse.y > y0)
&& (mouse.y < y0 + hojd)) { color = "green"; }
if (keyboard.g) { color = "yellow"; }
if (keyboard.b) { color = "blue"; }
// Välj radie på cikeln du ritar med
if (keyboard.one) { radie = 2; }
if (keyboard.two) { radie = 4; }
if (keyboard.three) { radie = 8; }
}
</script>
</body>
</html>
Exempel
Liam i TE16A gjorde detta ritprogram. Det är mycket bra och förstås A.
Fler kodexempel
Här finns fler kodexempel som du kan ha nytta av i ditt ritprogram. Bland annat kod för tusentals färger:
Advanced.js
Det verkar som att simple.js hämtar in ett script till, http://spelprogrammering.nu/advanced.js. Det vore bra om man kunde ta in den koden på ett överblickbart sätt i scriptet men det verker inte praktiskt möjligt.