User:Roelroscama/Canvas: Difference between revisions
Roelroscama (talk | contribs) No edit summary |
Roelroscama (talk | contribs) No edit summary |
||
Line 12: | Line 12: | ||
[http://www.roelroscamabbing.nl/canvasLoops/canvasloops2.html second try] (using loops to create a spectrum of colours)<br> | [http://www.roelroscamabbing.nl/canvasLoops/canvasloops2.html second try] (using loops to create a spectrum of colours)<br> | ||
[http://www.roelroscamabbing.nl/canvasLoops/canvasloops3.html third try] I got stuck with this one. The goal was to create a shape by rotating a single line using if statements. No rotate functions. | [http://www.roelroscamabbing.nl/canvasLoops/canvasloops3.html third try] I got stuck with this one. The goal was to create a shape by rotating a single line using if statements. No rotate functions. | ||
<canvas id="canvas1" showsrc> | |||
function init(){ | |||
var canvas = document.getElementById('canvas1'); | |||
var ctx = canvas.getContext('2d'); | |||
var width = canvas.width; | |||
var height = canvas.height; | |||
var y = 200; | |||
var x = 10; | |||
var rectSize = 10; | |||
for(var h=0;h<80;h++) { | |||
var xPos=x*i; | |||
for(var i=0;i<80;i++) { | |||
var yPos =(x+1)*i; | |||
for (var j=0;j<80;j++){ | |||
ctx.fillStyle = 'rgb('+4*h+','+4*i+','+4*j+')' | |||
ctx.fillRect((x+1)*j,yPos,rectSize,rectSize); | |||
} | |||
} | |||
} | |||
} | |||
</canvas> |
Revision as of 11:02, 1 October 2012
Counting In Public Space
Counting stacks on the block together with your good friends
additional information here
Canvas tryouts
first try
second try (using loops to create a spectrum of colours)
third try I got stuck with this one. The goal was to create a shape by rotating a single line using if statements. No rotate functions.
<canvas id="canvas1" showsrc>
function init(){ var canvas = document.getElementById('canvas1'); var ctx = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; var y = 200; var x = 10;
var rectSize = 10;
for(var h=0;h<80;h++) { var xPos=x*i;
for(var i=0;i<80;i++) {
var yPos =(x+1)*i;
for (var j=0;j<80;j++){
ctx.fillStyle = 'rgb('+4*h+','+4*i+','+4*j+')'
ctx.fillRect((x+1)*j,yPos,rectSize,rectSize); } }
} }
</canvas>