User:Marlon/technicalplan: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
Line 12: Line 12:
''Hello canvas!'' </font>
''Hello canvas!'' </font>


<canvas id="canvas" width="500" height="400">
<canvas id="canvas" width="500" height="400" showsrc>
function draw() {
function draw() {
   c = document.getElementById("canvas");
   c = document.getElementById("canvas");

Revision as of 14:06, 1 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)

Canvas image.jpg

Hello canvas!

<canvas id="canvas" width="500" height="400" showsrc> 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) {
   p.beginPath();
   p.arc(300, 400, x, 0, Math.PI*2, true); 
   p.closePath();
   p.stroke(); 
   x-=15;
}

} </canvas>