Thursday, June 28, 2012
Wednesday, June 27, 2012
Tuesday, June 12, 2012
Monday, June 11, 2012
Sunday, June 10, 2012
Thursday, June 7, 2012
Monday, June 4, 2012
Tuesday, May 29, 2012
context.beginPath();
// context.rect(x, y, width, height);
context.rect(0, 0, 800, 600);
context.lineWidth = 3;
context.lineCap = "round"; // "square" "round" "butt"
context.closePath();
context.fillStyle = "rgb(0,230,255)";
context.fill();
// context.strokeStyle = "rgb("+r+","+g+","+b+")"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();
context.beginPath();
// context.rect(x, y, width, height);
context.rect(0, 350, 800, 350);
context.closePath();
context.lineWidth = 3;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = "rgb(0,255,0)";
context.fill();
// context.strokeStyle = "rgb("+r+","+g+","+b+")"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();
context.beginPath();
// context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.arc(40, 40, 80, 0, Math.PI*2, false);
context.closePath();
context.lineWidth = 3;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = "rgb(255,255,0)";
context.fill();
// context.strokeStyle = "rgb("+r+","+g+","+b+")"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();
// context.beginPath();
var startX = 30;
var startY = 130;
var endX = 20;
var endY = 200;
context.moveTo(startX, startY); // STARTING COORDS
context.lineTo(endX, endY); // ENDING COORDS
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.strokeStyle = "rgb(255,255,0)"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();
// context.beginPath();
var startX = 80;
var startY = 120;
var endX = 110;
var endY = 180;
// context.beginPath();
context.moveTo(startX, startY); // STARTING COORDS
context.lineTo(endX, endY); // ENDING COORDS
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.strokeStyle = "rgb(255,255,0)"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();
// context.beginPath();
var startX = 120;
var startY = 95;
var endX = 190;
var endY = 145;
// context.beginPath();
context.moveTo(startX, startY); // STARTING COORDS
context.lineTo(endX, endY); // ENDING COORDS
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.strokeStyle = "rgb(255,255,0)"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();
// context.beginPath();
var startX = 135;
var startY = 60;
var endX = 210;
var endY = 70;
// context.beginPath();
context.moveTo(startX, startY); // STARTING COORDS
context.lineTo(endX, endY); // ENDING COORDS
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.strokeStyle = "rgb(255,255,0)"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();
// context.beginPath();
var startX = 130;
var startY = 20;
var endX = 200;
var endY = 5;
context.beginPath();
context.moveTo(startX, startY); // STARTING COORDS
context.lineTo(endX, endY); // ENDING COORDS
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.strokeStyle = "rgb(255,255,0)"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();
// ROAD
var start1X = 400;
var start1Y = 350;
var end1X = 150;
var end1Y = 600;
var start2X = 400;
var start2Y = 350;
var end2X = 750;
var end2Y = 600;
var start3X = 150;
var start3Y = 600;
var end3X = 750;
var end3Y = 600;
context.beginPath();
context.moveTo(start1X, start1Y); // STARTING COORDS
context.lineTo(end1X, end1Y); // ENDING COORDS
context.lineTo(end2X, end2Y); // ENDING COORDS
context.lineTo(end3X, end3Y); // ENDING COORDS
context.closePath();
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
// add linear gradient
var grd = context.createLinearGradient(start1X, start1Y, canvas.width/2, canvas.height);
// light blue
grd.addColorStop(0, "rgb(100,100,100)");
// dark blue
grd.addColorStop(1, "rgb(200,200,200)");
context.fillStyle = grd;
context.fill();
context.strokeStyle = "rgb(100,100,100)";
context.stroke();
///////// red house
context.beginPath();
// context.rect(x, y, width, height);
context.rect(45, 390, 140, 120);
context.closePath();
context.lineWidth = 3;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = "rgb(200,0,0)";
context.fill();
// context.strokeStyle = "rgb("+r+","+g+","+b+")"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.stroke();
////// roof
var start1X = 110
var start1Y = 335
var end1X = 35
var end1Y =390
var start2X = 110
var start2Y = 335
var end2X = 190
var end2Y = 390
var start3X = 35
var start3Y = 390
var end3X = 190
var end3Y = 390
context.beginPath();
context.moveTo(start1X, start1Y); // STARTING COORDS
context.lineTo(end1X, end1Y); // ENDING COORDS
context.lineTo(end2X, end2Y); // ENDING COORDS
context.lineTo(end3X, end3Y); // ENDING COORDS
context.closePath();
context.lineWidth = 5;
context.lineCap = "round"; // "square" "round" "butt"
context.strokeStyle = "rgb(0,0,0)"; // 'RED' 'GREEN' 'BLUE' "#FF00FF"
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.stroke();
//////// clouds
context.beginPath();
context.arc( 450, 150, 30, 0, 360, false);
context.lineWidth = 1;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.closePath();
context.beginPath();
context.arc( 500, 200, 40, 0, 360, false);
context.lineWidth = 1;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = "rgb(245,245,245)";
context.fill();
context.closePath();
context.beginPath();
context.arc( 550, 250, 60, 0, 360, false);
context.lineWidth = 1;
context.lineCap = "round"; // "square" "round" "butt"
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.closePath();
Subscribe to:
Posts (Atom)