Monday, September 30, 2013
Wednesday, September 25, 2013
Monday, September 23, 2013
Monday, September 16, 2013
Tuesday, September 10, 2013
PROJECT UNO
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(110,0,210) dotted; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
// BACKGROUND
context.beginPath();
context.rect(0,0,800,600);
context.closePath();
var grd = context.createLinearGradient(0,300,800,300);
grd.addColorStop(0,"rgb(255,0,0)"); // STARTING COLOUR
grd.addColorStop(0.25,"rgba(255,0,255,0.5)"); //
grd.addColorStop(0.5,"rgba(255,0,255,0.5)");//
grd.addColorStop(0.55,"rgb(255,255,0)"); //
grd.addColorStop(1,"rgba(0,0,255,0.5)"); // ENDING COLOUR
context.fillStyle = grd;
context.fill();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 90;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(0,255,0,0.2)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 125;
context.beginPath();
context.arc(125,475, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(0,255,0,0.1)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 125;
context.beginPath();
context.arc(125, 125, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(0,255,0,0.1)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'lime';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 40;
context.beginPath();
context.arc(650, 475, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(0,255,0,0.08)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 40;
context.beginPath();
context.arc(650, 125, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(0,255,0,0.08)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(125, 125, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'lime';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(125, 480, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'lime';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 15;
context.beginPath();
context.arc(650, 125, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'lime';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 15;
context.beginPath();
context.arc(650, 475, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'lime';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(400, 300, 90, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = "rgba(0,255,0,0.08)";
context.fill();
context.strokeStyle = 'lime';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 400;
context.beginPath();
context.arc(400, 300, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(0,255,0,0.08)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'red';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 300;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(0,255,0,0.08)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'yellow';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(0,255,0,0.08)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'green';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(0,255,0,0.08)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(250, 125);
context.lineTo(610, 125);
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(652, 438);
context.lineTo(652, 165);
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(250, 475);
context.lineTo(610, 475);
context.stroke();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(120, 350);
context.lineTo(120, 250);
context.stroke();
</script>
</body>
</html>
Monday, September 9, 2013
constant properties
canvas.width and canvas.height ( from <canvas id="myCanvas" width="800" height="600"></canvas> )
declaration of variables
var x = 10;
var y = 10;
Repeat loops example
for (var i=0; i<canvas.height; i+=20) {
context.beginPath();
context.lineWidth = i/20;
context.strokeStyle = "rgb("+i+",0,0)";
context.moveTo(0, 0);
context.lineTo(canvas.width, i);
context.stroke();
}
Tuesday, September 3, 2013
Subscribe to:
Posts (Atom)