diff options
Diffstat (limited to 'examples/script/context2d/scripts')
19 files changed, 820 insertions, 0 deletions
diff --git a/examples/script/context2d/scripts/alpha.js b/examples/script/context2d/scripts/alpha.js new file mode 100644 index 0000000..23fa5d4 --- /dev/null +++ b/examples/script/context2d/scripts/alpha.js @@ -0,0 +1,21 @@ +var ctx = document.getElementById('tutorial').getContext('2d'); + // draw background + ctx.fillStyle = '#FD0'; + ctx.fillRect(0,0,75,75); + ctx.fillStyle = '#6C0'; + ctx.fillRect(75,0,75,75); + ctx.fillStyle = '#09F'; + ctx.fillRect(0,75,75,75); + ctx.fillStyle = '#F30'; + ctx.fillRect(75,75,75,75); + ctx.fillStyle = '#FFF'; + + // set transparency value + ctx.globalAlpha = 0.2; + + // Draw semi transparent circles + for (i=0;i<7;i++){ + ctx.beginPath(); + ctx.arc(75,75,10+10*i,0,Math.PI*2,true); + ctx.fill(); + } diff --git a/examples/script/context2d/scripts/arc.js b/examples/script/context2d/scripts/arc.js new file mode 100644 index 0000000..650bcda --- /dev/null +++ b/examples/script/context2d/scripts/arc.js @@ -0,0 +1,30 @@ +var canvas = document.getElementById('tutorial'); + + // Make sure we don't execute when canvas isn't supported + if (canvas.getContext){ + + // use getContext to use the canvas for drawing + var ctx = canvas.getContext('2d'); + + // Draw shapes + for (i=0;i<4;i++){ + for(j=0;j<3;j++){ + ctx.beginPath(); + var x = 25+j*50; // x coordinate + var y = 25+i*50; // y coordinate + var radius = 20; // Arc radius + var startAngle = 0; // Starting point on circle + var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle + var clockwise = i%2==0 ? false : true; // clockwise or anticlockwise + + ctx.arc(x,y,radius,startAngle,endAngle, clockwise); + + if (i>1){ + ctx.fill(); + } else { + ctx.stroke(); + } + } + } + + } diff --git a/examples/script/context2d/scripts/bezier.js b/examples/script/context2d/scripts/bezier.js new file mode 100644 index 0000000..719800e --- /dev/null +++ b/examples/script/context2d/scripts/bezier.js @@ -0,0 +1,26 @@ +function drawShape() { +// get the canvas element using the DOM +var canvas = document.getElementById('tutorial'); + + // Make sure we don't execute when canvas isn't supported + if (canvas.getContext){ + + // use getContext to use the canvas for drawing + var ctx = canvas.getContext('2d'); + + // Draw shapes + + ctx.beginPath(); + ctx.moveTo(75,40); + ctx.bezierCurveTo(75,37,70,25,50,25); + ctx.bezierCurveTo(20,25,20,62.5,20,62.5); + ctx.bezierCurveTo(20,80,40,102,75,120); + ctx.bezierCurveTo(110,102,130,80,130,62.5); + ctx.bezierCurveTo(130,62.5,130,25,100,25); + ctx.bezierCurveTo(85,25,75,37,75,40); + ctx.fill(); + ctx.globalAlpha = 0.5; + } +} + +drawShape(); diff --git a/examples/script/context2d/scripts/clock.js b/examples/script/context2d/scripts/clock.js new file mode 100644 index 0000000..ad287d8 --- /dev/null +++ b/examples/script/context2d/scripts/clock.js @@ -0,0 +1,99 @@ +function init(){ + clock(); + setInterval('clock()',1000); +} +function clock(){ + var now = new Date(); + var ctx = document.getElementById('tutorial').getContext('2d'); + ctx.save(); + ctx.clearRect(0,0,150,150); + ctx.translate(75,75); + ctx.scale(0.4,0.4); + ctx.rotate(-Math.PI/2); + ctx.strokeStyle = "black"; + ctx.fillStyle = "white"; + ctx.lineWidth = 8; + ctx.lineCap = "round"; + + // Hour marks + ctx.save(); + ctx.beginPath(); + for (i=0;i<12;i++){ + ctx.rotate(Math.PI/6); + ctx.moveTo(100,0); + ctx.lineTo(120,0); + } + ctx.stroke(); + ctx.restore(); + + // Minute marks + ctx.save(); + ctx.lineWidth = 5; + ctx.beginPath(); + for (i=0;i<60;i++){ + if (i%5!=0) { + ctx.moveTo(117,0); + ctx.lineTo(120,0); + } + ctx.rotate(Math.PI/30); + } + ctx.stroke(); + ctx.restore(); + + var sec = now.getSeconds(); + var min = now.getMinutes(); + var hr = now.getHours(); + hr = hr>=12 ? hr-12 : hr; + + ctx.fillStyle = "black"; + + // write Hours + ctx.save(); + ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) + ctx.lineWidth = 14; + ctx.beginPath(); + ctx.moveTo(-20,0); + ctx.lineTo(80,0); + ctx.stroke(); + ctx.restore(); + + // write Minutes + ctx.save(); + ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec ) + ctx.lineWidth = 10; + ctx.beginPath(); + ctx.moveTo(-28,0); + ctx.lineTo(112,0); + ctx.stroke(); + ctx.restore(); + + // Write seconds + ctx.save(); + ctx.rotate(sec * Math.PI/30); + ctx.strokeStyle = "#D40000"; + ctx.fillStyle = "#D40000"; + ctx.lineWidth = 6; + ctx.beginPath(); + ctx.moveTo(-30,0); + ctx.lineTo(83,0); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(0,0,10,0,Math.PI*2,true); + ctx.fill(); + ctx.beginPath(); + ctx.arc(95,0,10,0,Math.PI*2,true); + ctx.stroke(); + ctx.fillStyle = "#555"; + ctx.arc(0,0,3,0,Math.PI*2,true); + ctx.fill(); + ctx.restore(); + + ctx.beginPath(); + ctx.lineWidth = 14; + ctx.strokeStyle = '#325FA2'; + ctx.arc(0,0,142,0,Math.PI*2,true); + ctx.stroke(); + + ctx.restore(); +} +init(); diff --git a/examples/script/context2d/scripts/fill1.js b/examples/script/context2d/scripts/fill1.js new file mode 100644 index 0000000..db5eeb7 --- /dev/null +++ b/examples/script/context2d/scripts/fill1.js @@ -0,0 +1,8 @@ +var ctx = document.getElementById('tutorial').getContext('2d'); + for (i=0;i<6;i++){ + for (j=0;j<6;j++){ + ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + + Math.floor(255-42.5*j) + ',0)'; + ctx.fillRect(j*25,i*25,25,25); + } + } diff --git a/examples/script/context2d/scripts/grad.js b/examples/script/context2d/scripts/grad.js new file mode 100644 index 0000000..24ccfbb --- /dev/null +++ b/examples/script/context2d/scripts/grad.js @@ -0,0 +1,20 @@ + var ctx = document.getElementById('tutorial').getContext('2d'); + + // Create gradients + var lingrad = ctx.createLinearGradient(0,0,0,150); + lingrad.addColorStop(0, '#00ABEB'); + lingrad.addColorStop(0.5, '#fff'); + lingrad.addColorStop(0.5, '#66CC00'); + lingrad.addColorStop(1, '#fff'); + + var lingrad2 = ctx.createLinearGradient(0,50,0,95); + lingrad2.addColorStop(0.5, '#000'); + lingrad2.addColorStop(1, 'rgba(0,0,0,0)'); + + // assign gradients to fill and stroke styles + ctx.fillStyle = lingrad; + ctx.strokeStyle = lingrad2; + + // draw shapes + ctx.fillRect(10,10,130,130); + ctx.strokeRect(50,50,50,50); diff --git a/examples/script/context2d/scripts/linecap.js b/examples/script/context2d/scripts/linecap.js new file mode 100644 index 0000000..18ceb23 --- /dev/null +++ b/examples/script/context2d/scripts/linecap.js @@ -0,0 +1,24 @@ +var ctx = document.getElementById('tutorial').getContext('2d'); + var lineCap = ['butt','round','square']; + + // Draw guides + ctx.save(); + ctx.strokeStyle = '#09f'; + ctx.beginPath(); + ctx.moveTo(10,10); + ctx.lineTo(140,10); + ctx.moveTo(10,140); + ctx.lineTo(140,140); + ctx.stroke(); + + // Draw lines + ctx.strokeStyle = 'black'; + for (i=0;i<lineCap.length;i++){ + ctx.lineWidth = 15; + ctx.lineCap = lineCap[i]; + ctx.beginPath(); + ctx.moveTo(25+i*50,10); + ctx.lineTo(25+i*50,140); + ctx.stroke(); + } + ctx.restore(); diff --git a/examples/script/context2d/scripts/linestye.js b/examples/script/context2d/scripts/linestye.js new file mode 100644 index 0000000..728e3e6 --- /dev/null +++ b/examples/script/context2d/scripts/linestye.js @@ -0,0 +1,10 @@ +var ctx = document.getElementById('tutorial').getContext('2d'); +ctx.save(); + for (i=0;i<10;i++){ + ctx.lineWidth = 1+i; + ctx.beginPath(); + ctx.moveTo(5+i*14,5); + ctx.lineTo(5+i*14,140); + ctx.stroke(); + } +ctx.restore();
\ No newline at end of file diff --git a/examples/script/context2d/scripts/moveto.js b/examples/script/context2d/scripts/moveto.js new file mode 100644 index 0000000..73c4e8d --- /dev/null +++ b/examples/script/context2d/scripts/moveto.js @@ -0,0 +1,20 @@ +var canvas = document.getElementById('tutorial'); + + // Make sure we don't execute when canvas isn't supported + if (canvas.getContext){ + + // use getContext to use the canvas for drawing + var ctx = canvas.getContext('2d'); + + // Draw shapes + ctx.beginPath(); + ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle + ctx.moveTo(110,75); + ctx.arc(75,75,35,0,Math.PI,false); // Mouth + ctx.moveTo(65,65); + ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye + ctx.moveTo(95,65); + ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye + ctx.stroke(); + + } diff --git a/examples/script/context2d/scripts/moveto2.js b/examples/script/context2d/scripts/moveto2.js new file mode 100644 index 0000000..021f47b --- /dev/null +++ b/examples/script/context2d/scripts/moveto2.js @@ -0,0 +1,24 @@ +var canvas = document.getElementById('tutorial'); + + // Make sure we don't execute when canvas isn't supported + if (canvas.getContext){ + + // use getContext to use the canvas for drawing + var ctx = canvas.getContext('2d'); + + // Filled triangle + ctx.beginPath(); + ctx.moveTo(25,25); + ctx.lineTo(105,25); + ctx.lineTo(25,105); + ctx.fill(); + + // Stroked triangle + ctx.beginPath(); + ctx.moveTo(125,125); + ctx.lineTo(125,45); + ctx.lineTo(45,125); + ctx.closePath(); + ctx.stroke(); + + } diff --git a/examples/script/context2d/scripts/pacman.js b/examples/script/context2d/scripts/pacman.js new file mode 100644 index 0000000..af3750f --- /dev/null +++ b/examples/script/context2d/scripts/pacman.js @@ -0,0 +1,83 @@ +function roundedRect(ctx,x,y,width,height,radius){ + ctx.beginPath(); + ctx.moveTo(x,y+radius); + ctx.lineTo(x,y+height-radius); + ctx.quadraticCurveTo(x,y+height,x+radius,y+height); + ctx.lineTo(x+width-radius,y+height); + ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius); + ctx.lineTo(x+width,y+radius); + ctx.quadraticCurveTo(x+width,y,x+width-radius,y); + ctx.lineTo(x+radius,y); + ctx.quadraticCurveTo(x,y,x,y+radius); + ctx.stroke(); +} + +var canvas = document.getElementById('tutorial'); + + // Make sure we don't execute when canvas isn't supported + if (canvas.getContext){ + + // use getContext to use the canvas for drawing + var ctx = canvas.getContext('2d'); + + // Draw shapes + roundedRect(ctx,12,12,150,150,15); + roundedRect(ctx,19,19,150,150,9); + roundedRect(ctx,53,53,49,33,10); + roundedRect(ctx,53,119,49,16,6); + roundedRect(ctx,135,53,49,33,10); + roundedRect(ctx,135,119,25,49,10); + + // Character 1 + ctx.beginPath(); + ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); + ctx.lineTo(34,37); + ctx.fill(); + + // blocks + for(i=0;i<8;i++){ + ctx.fillRect(51+i*16,35,4,4); + } + for(i=0;i<6;i++){ + ctx.fillRect(115,51+i*16,4,4); + } + for(i=0;i<8;i++){ + ctx.fillRect(51+i*16,99,4,4); + } + + // character 2 + ctx.beginPath(); + ctx.moveTo(83,116); + ctx.lineTo(83,102); + + ctx.bezierCurveTo(83,94,89,88,97,88); + ctx.bezierCurveTo(105,88,111,94,111,102); + ctx.lineTo(111,116); + ctx.lineTo(106.333,111.333); + ctx.lineTo(101.666,116); + ctx.lineTo(97,111.333); + ctx.lineTo(92.333,116); + ctx.lineTo(87.666,111.333); + ctx.lineTo(83,116); + ctx.fill(); + ctx.fillStyle = "white"; + ctx.beginPath(); + ctx.moveTo(91,96); + ctx.bezierCurveTo(88,96,87,99,87,101); + ctx.bezierCurveTo(87,103,88,106,91,106); + ctx.bezierCurveTo(94,106,95,103,95,101); + ctx.bezierCurveTo(95,99,94,96,91,96); + ctx.moveTo(103,96); + ctx.bezierCurveTo(100,96,99,99,99,101); + ctx.bezierCurveTo(99,103,100,106,103,106); + ctx.bezierCurveTo(106,106,107,103,107,101); + ctx.bezierCurveTo(107,99,106,96,103,96); + ctx.fill(); + ctx.fillStyle = "black"; + ctx.beginPath(); + ctx.arc(101,102,2,0,Math.PI*2,true); + ctx.fill(); + ctx.beginPath(); + ctx.arc(89,102,2,0,Math.PI*2,true); + ctx.fill(); + } diff --git a/examples/script/context2d/scripts/plasma.js b/examples/script/context2d/scripts/plasma.js new file mode 100644 index 0000000..1aa9294 --- /dev/null +++ b/examples/script/context2d/scripts/plasma.js @@ -0,0 +1,58 @@ +var counter = 0; + +var PIXEL_SIZE = 4; + +var temp_1 = 0; + +function init() +{ + setInterval('render()',50); +} + +function dist(a, b, c, d) +{ + return Math.sqrt((a - c) * (a - c) + (b - d) * (b - d)); +} + + +function render() +{ + var canvas = document.getElementById('tutorial'); + canvas.resize(128, 128); + var ctx = canvas.getContext('2d'); + ctx.save(); + + var time = counter * 5; + + + for( y = 0; y < 128; y+=PIXEL_SIZE) { + for( x = 0 ; x < 128; x+=PIXEL_SIZE) { + + + var temp_val = Math.floor(Math.sin(dist(x + time, y, 128.0, 128.0) / 8.0) + + Math.sin(dist(x, y, 64.0, 64.0) / 8.0) + + Math.sin(dist(x, y + time / 7, 192.0, 64) / 7.0) + + Math.sin(dist(x, y, 192.0, 100.0) / 8.0)); + + + + + var temp_col = Math.floor((2 + temp_val) * 50); + + var rand_red = temp_col * 3; + var rand_green = temp_col ; + var rand_blue = 128 - temp_col; + + ctx.fillStyle = "rgb("+rand_red+","+rand_green+","+rand_blue+")"; + + ctx.fillRect(x,y,PIXEL_SIZE,PIXEL_SIZE); + } + } + + + ctx.restore(); + counter++; + +} + +init(); diff --git a/examples/script/context2d/scripts/pong.js b/examples/script/context2d/scripts/pong.js new file mode 100644 index 0000000..2bff053 --- /dev/null +++ b/examples/script/context2d/scripts/pong.js @@ -0,0 +1,235 @@ +// globals +playarea_canvas = document.getElementById('tutorial'); +playarea_canvas.resize(320,200); +playarea = playarea_canvas.getContext('2d'); +//p1_scr = document.getElementById('p1_scr'); +//p2_scr = document.getElementById('p2_scr'); +//status_msg = document.getElementById('status'); +//debug = document.getElementById('debug'); +ball_direction = 0; +up = -1; +down = 1; + +//key codes +key_up = 38; +key_down = 40; +key_W = 87; +key_S = 83; +key_pause = 32; + +speed = 2; //controls the speed of the ball +paddle_inc = 10; //how many pixels paddle can move in either direction +pause = false; + +player_1 = 0; //player IDs +player_2 = 1; +player_1_scr = 0; //player scores +player_2_scr = 0; +player_1_direction = null; //null = no movement whatsoever +player_2_direction = null; + +pa = new Array(); +divider = new Array(); +paddle_1 = new Array(); +paddle_2 = new Array(); +ball = new Array(); + + +function sleep(numberMillis) +{ + var now = new Date(); + var exitTime = now.getTime() + numberMillis; + while (true) { + now = new Date(); + if (now.getTime() > exitTime) + return; + } +} + +function init() +{ + pa['width'] = 150; + pa['height'] = 140; + pa['player_margin'] = 10; //area behind player paddles + pa['foreground'] = "#FFFFFF"; + pa['background'] = "#000000"; + + divider['pos'] = pa['width']/2; + divider['width'] = 4; + + paddle_1['width'] = 8; + paddle_1['height'] = 64; + paddle_1['x'] = pa['player_margin']; + paddle_1['y'] = (pa['height'] /2 ) - (paddle_1['height'] / 2); + + paddle_2['width'] = 8; + paddle_2['height'] = 64; + paddle_2['x'] = (pa['width'] - pa['player_margin'] - paddle_2['width']); + paddle_2['y'] = (pa['height'] /2 ) - (paddle_2['height'] / 2); + + ball['width'] = 10; + ball['height'] = 10; + ball['x'] = (pa['width']/2) - (ball['width'] / 2); + ball['y'] = (pa['height']/2) - (ball['height'] / 2); + + ball_direction = Math.random() * 360; //initialize ball direction, which is determined by angle, at random + speed = 2; +} + +function renderPlayarea() +{ + playarea.beginPath(); + + playarea.clearRect(0,0,pa['width'],pa['height']); + playarea.fillStyle = pa['background']; + playarea.strokeStyle = pa['foreground']; + playarea.fillRect(0,0, pa['width'], pa['height']); + + //move paddles + if(player_1_direction != null) + { + if(player_1_direction == up) + paddle_1['y'] = paddle_1['y'] - paddle_inc; + else + paddle_1['y'] = paddle_1['y'] + paddle_inc; + } + if(player_2_direction != null) + { + if(player_2_direction == up) + paddle_2['y'] = paddle_2['y'] - paddle_inc; + else + paddle_2['y'] = paddle_2['y'] + paddle_inc; + } + playarea.rect(paddle_1['x'],paddle_1['y'],paddle_1['width'],paddle_1['height']); + playarea.rect(paddle_2['x'],paddle_2['y'],paddle_2['width'],paddle_2['height']); + + //move ball + playarea.rect(ball['x'], ball['y'], ball['width'], ball['height']); + ball['x'] = ball['x'] + Math.cos((ball_direction)*Math.PI/180) * speed; + ball['y'] = ball['y'] + Math.sin((ball_direction)*Math.PI/180) * speed; + + playarea.fillStyle = pa['foreground']; + playarea.fill(); + + playarea.beginPath(); + //redraw divider + playarea.lineWidth = divider['width']; + playarea.lineTo(divider['pos'], 0); + playarea.lineTo(divider['pos'], pa['height'] = 200); + playarea.lineWidth = 1; + + playarea.stroke(); + playarea.closePath(); +} + +function testCollisions() +{ + //make sure paddles don't go beyond play area + if(((paddle_1['y'] <= 0) && (player_1_direction == up)) || ((paddle_1['y'] >= (pa['height'] - paddle_1['height'])) && (player_1_direction == down))) + player_1_direction = null; + if(((paddle_2['y'] <= 0) && (player_2_direction == up)) || ((paddle_2['y'] >= (pa['height'] - paddle_2['height'])) && (player_2_direction == down))) + player_2_direction = null; + + //check to see if ball went beyond paddles, and if so, score accordingly and reset playarea + if(ball['x'] <= 0) + { + setScore(player_2); + init() + sleep(1000); + } + if(ball['x'] >= (pa['width'] - ball['width'])) + { + setScore(player_1); + init(); + sleep(1000); + } + + //check to see if ball hit top or bottom wall. if so, change direction + if((ball['y'] >= (pa['height'] - ball['height'])) || ball['y'] <= 0) + ball_direction = -ball_direction; + + //check to see if the ball hit a paddle, and if so, change ball angle dependant on where it hit the paddle + if((ball['x'] <= (paddle_1['x'] + paddle_1['width'])) && (ball['y'] >= paddle_1['y']) && (ball['y'] <= (paddle_1['y'] + paddle_1['height']))) + { + ball_direction = -ball_direction/2; + speed += .5; + } + if(((ball['x'] + ball['width']) >= paddle_2['x']) && (ball['y'] >= paddle_2['y']) && (ball['y'] <= (paddle_2['y'] + paddle_2['height']))) + { + ball_direction = (180+ball_direction)/2; + speed += .5; + } +} + +function setScore(p) +{ + if(p == player_1) + { + player_1_scr++; + //p1_scr.firstChild.nodeValue = player_1_scr; + } + if(p == player_2) + { + player_2_scr++; + //p2_scr.firstChild.nodeValue = player_2_scr; + } +} + + +//handle input +document.onkeydown = function(ev) +{ + switch(ev.keyCode) + { + case key_W: + player_1_direction = up; + break; + case key_S: + player_1_direction = down; + break; + case key_up: + player_2_direction = up; + break; + case key_down: + player_2_direction = down; + break; + } +} + +document.onkeyup = function(ev) +{ + switch(ev.keyCode) + { + case key_W: + case key_S: + player_1_direction = null; + break; + case key_up: + case key_down: + player_2_direction = null; + break; + case key_pause: + if(pause == false) + { + clearInterval(game); + //status_msg.style.visibility = "visible"; + pause = true; + } + else + { + game = setInterval(main, 25); + //status_msg.style.visibility = "hidden"; + pause = false; + } + break; + } +} + +function main() +{ + testCollisions(); + renderPlayarea(); +} + +init(); +game = setInterval(main, 25); diff --git a/examples/script/context2d/scripts/quad.js b/examples/script/context2d/scripts/quad.js new file mode 100644 index 0000000..ad3a0d5 --- /dev/null +++ b/examples/script/context2d/scripts/quad.js @@ -0,0 +1,21 @@ +var canvas = document.getElementById('tutorial'); + + // Make sure we don't execute when canvas isn't supported + if (canvas.getContext){ + + // use getContext to use the canvas for drawing + var ctx = canvas.getContext('2d'); + + // Draw shapes + + ctx.beginPath(); + ctx.moveTo(75,25); + ctx.quadraticCurveTo(25,25,25,62.5); + ctx.quadraticCurveTo(25,100,50,100); + ctx.quadraticCurveTo(50,120,30,125); + ctx.quadraticCurveTo(60,120,65,100); + ctx.quadraticCurveTo(125,100,125,62.5); + ctx.quadraticCurveTo(125,25,75,25); + ctx.stroke(); + + } diff --git a/examples/script/context2d/scripts/rgba.js b/examples/script/context2d/scripts/rgba.js new file mode 100644 index 0000000..a4e5e9a --- /dev/null +++ b/examples/script/context2d/scripts/rgba.js @@ -0,0 +1,19 @@ +var ctx = document.getElementById('tutorial').getContext('2d'); + + // Draw background + ctx.fillStyle = 'rgb(255,221,0)'; + ctx.fillRect(0,0,150,37.5); + ctx.fillStyle = 'rgb(102,204,0)'; + ctx.fillRect(0,37.5,150,37.5); + ctx.fillStyle = 'rgb(0,153,255)'; + ctx.fillRect(0,75,150,37.5); + ctx.fillStyle = 'rgb(255,51,0)'; + ctx.fillRect(0,112.5,150,37.5); + + // Draw semi transparent rectangles + for (i=0;i<10;i++){ + ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')'; + for (j=0;j<4;j++){ + ctx.fillRect(5+i*14,5+j*37.5,14,27.5) + } + } diff --git a/examples/script/context2d/scripts/rotate.js b/examples/script/context2d/scripts/rotate.js new file mode 100644 index 0000000..c7ef369 --- /dev/null +++ b/examples/script/context2d/scripts/rotate.js @@ -0,0 +1,16 @@ +var ctx = document.getElementById('tutorial').getContext('2d'); + ctx.translate(75,75); + + for (i=1;i<6;i++){ // Loop through rings (from inside to out) + ctx.save(); + ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'; + + for (j=0;j<i*6;j++){ // draw individual dots + ctx.rotate(Math.PI*2/(i*6)); + ctx.beginPath(); + ctx.arc(0,i*12.5,5,0,Math.PI*2,true); + ctx.fill(); + } + + ctx.restore(); + } diff --git a/examples/script/context2d/scripts/scale.js b/examples/script/context2d/scripts/scale.js new file mode 100644 index 0000000..75ef865 --- /dev/null +++ b/examples/script/context2d/scripts/scale.js @@ -0,0 +1,67 @@ +var ctx = document.getElementById('tutorial').getContext('2d'); + ctx.strokeStyle = "#fc0"; + ctx.lineWidth = 1.5; + ctx.fillRect(0,0,300,300); + + // Uniform scaling + ctx.save() + ctx.translate(50,50); + drawSpirograph(ctx,22,6,5); // no scaling + + ctx.translate(100,0); + ctx.scale(0.75,0.75); + drawSpirograph(ctx,22,6,5); + + ctx.translate(133.333,0); + ctx.scale(0.75,0.75); + drawSpirograph(ctx,22,6,5); + ctx.restore(); + + // Non uniform scaling (y direction) + ctx.strokeStyle = "#0cf"; + ctx.save() + ctx.translate(50,150); + ctx.scale(1,0.75); + drawSpirograph(ctx,22,6,5); + + ctx.translate(100,0); + ctx.scale(1,0.75); + drawSpirograph(ctx,22,6,5); + + ctx.translate(100,0); + ctx.scale(1,0.75); + drawSpirograph(ctx,22,6,5); + ctx.restore(); + + // Non uniform scaling (x direction) + ctx.strokeStyle = "#cf0"; + ctx.save() + ctx.translate(50,250); + ctx.scale(0.75,1); + drawSpirograph(ctx,22,6,5); + + ctx.translate(133.333,0); + ctx.scale(0.75,1); + drawSpirograph(ctx,22,6,5); + + ctx.translate(177.777,0); + ctx.scale(0.75,1); + drawSpirograph(ctx,22,6,5); + ctx.restore(); +function drawSpirograph(ctx,R,r,O){ + var x1 = R-O; + var y1 = 0; + var i = 1; + ctx.beginPath(); + ctx.moveTo(x1,y1); + do { + if (i>20000) break; + var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) + var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) + ctx.lineTo(x2,y2); + x1 = x2; + y1 = y2; + i++; + } while (x2 != R-O && y2 != 0 ); + ctx.stroke(); +} diff --git a/examples/script/context2d/scripts/stroke1.js b/examples/script/context2d/scripts/stroke1.js new file mode 100644 index 0000000..0561a52 --- /dev/null +++ b/examples/script/context2d/scripts/stroke1.js @@ -0,0 +1,10 @@ +var ctx = document.getElementById('tutorial').getContext('2d'); + for (i=0;i<6;i++){ + for (j=0;j<6;j++){ + ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + + Math.floor(255-42.5*j) + ')'; + ctx.beginPath(); + ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true); + ctx.stroke(); + } + } diff --git a/examples/script/context2d/scripts/translate.js b/examples/script/context2d/scripts/translate.js new file mode 100644 index 0000000..7c94433 --- /dev/null +++ b/examples/script/context2d/scripts/translate.js @@ -0,0 +1,29 @@ + var ctx = document.getElementById('tutorial').getContext('2d'); + ctx.fillRect(0,0,300,300); + for (var i=0;i<3;i++) { + for (var j=0;j<3;j++) { + ctx.save(); + ctx.strokeStyle = "#9CFF00"; + ctx.translate(50+j*100,50+i*100); + drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10); + ctx.restore(); + } + } + +function drawSpirograph(ctx,R,r,O){ + var x1 = R-O; + var y1 = 0; + var i = 1; + ctx.beginPath(); + ctx.moveTo(x1,y1); + do { + if (i>20000) break; + var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72)) + var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72)) + ctx.lineTo(x2,y2); + x1 = x2; + y1 = y2; + i++; + } while (x2 != R-O && y2 != 0 ); + ctx.stroke(); +} |