User:Marlon/technicalplan: Difference between revisions
No edit summary |
No edit summary |
||
(3 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
------- | ------- | ||
<font color="#FF33CC">'''De elektriciteitsmeter ''on tour!''''' (in Eerbeek) | <font color="#FF33CC">'''De elektriciteitsmeter ''on tour!''''' (in Eerbeek) | ||
[[file: | [[file: Canvas_image.jpg]] | ||
''Hello canvas!'' </font> | |||
<canvas id="canvas" width="500" height="400"> | |||
function draw() { | |||
c = document.getElementById("canvas"); | |||
p = c.getContext("2d"); | |||
tiles = 1; | |||
x = 200; | |||
z = -10; | |||
y = 250; | |||
r = 200; | |||
q = 35; | |||
make_base() | |||
function make_base() { | |||
base_image = new Image(); | |||
base_image.src = 'http://4.bp.blogspot.com/-sG9aEW4Ex_c/UEYVKqieDbI/AAAAAAAAFIA/t3lTDF2thfc/s1600/tree-spooky-graphicsfairy004c.jpg'; | |||
base_image.onload = function(){ | |||
p.drawImage(base_image, 10, 10, 200, 200); | |||
} | |||
} | |||
while (tiles < 147) { | |||
p.strokeRect(z,y,20,20); | |||
z = z + 25; | |||
tiles++; | |||
if (z > 600) { | |||
z = -10; | |||
y = y + 25; | |||
} | |||
} | |||
p.beginPath() | |||
p.moveTo(320,70); | |||
p.lineTo(315,280); | |||
p.lineTo(645,320); | |||
p.lineTo(490,-25); | |||
p.closePath() | |||
p.fill() | |||
p.beginPath() | |||
p.moveTo(350,280); | |||
p.lineTo(325,400); | |||
p.lineTo(420,400); | |||
p.lineTo(420,280); | |||
p.fill() | |||
p.closePath() | |||
while (x<300, x>10) { | |||
p.beginPath(); | |||
p.arc(300, 400, x, 0, Math.PI*2, true); | |||
p.closePath(); | |||
p.stroke(); | |||
x-=15; | |||
} | |||
} | |||
</canvas> |
Latest revision as of 11:36, 6 October 2012
I know basic HTML, CSS and some no Javascript.
I want to learn more Javascript and PHP, for now.
De elektriciteitsmeter on tour! (in Eerbeek)
Hello canvas!
<canvas id="canvas" width="500" height="400"> function draw() {
c = document.getElementById("canvas"); p = c.getContext("2d"); tiles = 1; x = 200; z = -10; y = 250; r = 200; q = 35;
make_base()
function make_base() { base_image = new Image(); base_image.src = 'http://4.bp.blogspot.com/-sG9aEW4Ex_c/UEYVKqieDbI/AAAAAAAAFIA/t3lTDF2thfc/s1600/tree-spooky-graphicsfairy004c.jpg'; base_image.onload = function(){ p.drawImage(base_image, 10, 10, 200, 200); } }
while (tiles < 147) { p.strokeRect(z,y,20,20); z = z + 25; tiles++; if (z > 600) { z = -10; y = y + 25; } }
p.beginPath() p.moveTo(320,70); p.lineTo(315,280); p.lineTo(645,320); p.lineTo(490,-25); p.closePath() p.fill()
p.beginPath() p.moveTo(350,280); p.lineTo(325,400); p.lineTo(420,400); p.lineTo(420,280); p.fill() p.closePath()
while (x<300, x>10) { p.beginPath(); p.arc(300, 400, x, 0, Math.PI*2, true); p.closePath(); p.stroke(); x-=15; }
} </canvas>