Daniella in a Nutshell: Picture Using HTML codes

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//Rectangle

var grdstartX = 400;

var grdstartY = 0;

var grdendX = 400;

var grdendY = 600;

//Rectangle

context.beginPath();

context.rect(0, 0, canvas.width, canvas.height);

var grd = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);

//Purple

grd.addColorStop(0, 'rgb(255, 69, 0)');

//Blue

grd.addColorStop(1, 'rgb(0, 0, 255)');

context.fillStyle = grd;

context.fill();

context.stroke();

// bottom boat

var startX = 250;

var startY = 300;

var controlX = 300;

var controlY = 500;

var controlX = 500;

var controlY = 500;

var endX = 550;

var endY = 300;

//line across boat

var startX = 250;

var startY = 300;

var endX = 550;

var endY = 300;

// waves

var startX = 0;

var startY = 500 ;

var controlX = 100;

var controlY = 400;

var endX = 200;

var endY = 500;

var startX = 200;

var startY = 500;

var controlX = 300;

var controlY = 400;

var endX = 400;

var endY = 500;

var startX = 400;

var startY = 500;

var controlX = 300;

var controlY = 400;

var endX = 800;

var endY = 500;

var startX = 600;

var startY = 500;

var controlX = 700;

var controlY = 400;

var endX = 800;

var endY = 500;

var startX = 800;

var startY = 500;

var controlX = 900;

var controlY = 1000;

var endX = 0;

var endY = 500;

// flag post

var startX = 450;

var startY = 300;

var endX = 450;

var endY = 50;

//flag slanted part

var startX = 450;

var startY = 50;

var endX = 600;

var endY = 150;

//flag bottom part

var startX = 600;

var startY = 150;

var endX = 450;

var endY = 150;

// fishing pole

var startX = 300;

var startY = 300;

var endX = 250;

var endY = 200;

var startX = 250;

var startY = 200;

var endX = 150;

var endY = 500;

//hook

var startX = 150;

var startY = 500;

var controlX = 150;

var controlY = 550;

var endX = 175;

var endY = 525;

//sun

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 70;

// fish body

var startX = 350 ;

var startY = 550 ;

var controlX = 300;

var controlY = 500;

var endX = 250;

var endY = 550;

var startX = 250 ;

var startY = 550 ;

var controlX = 300;

var controlY = 600;

var endX = 350;

var endY = 550;

//fish tail

var startX = 350;

var startY = 550;

var endX = 375;

var endY = 525;

var startX = 375;

var startY = 525;

var endX = 375;

var endY = 575;

var startX = 375;

var startY = 575;

var endX = 350;

var endY = 550;

//Curve

context.beginPath();

context.moveTo(250, 300);

context.bezierCurveTo(300, 500, 500, 500, 550, 300);

context.lineWidth = 5;

context.stroke();

// butt of boat

context.beginPath();

context.moveTo(250, 300);

context.lineTo(550, 300);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(250, 300);

context.bezierCurveTo(300, 500, 500, 500, 550, 300);

context.lineTo(250, 300);

context.lineCap = "round";

context.lineWidth = 5;

context.fillStyle = 'rgb(50, 205, 50)';

context.fill();

context.stroke();

// Waves

context.beginPath();

context.moveTo(0, 500);

context.quadraticCurveTo(100, 400, 200, 500);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(200, 500);

context.quadraticCurveTo(300, 400, 400, 500);

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(400, 500);

context.quadraticCurveTo(500, 400, 600, 500);

context.moveTo(600, 500);

context.quadraticCurveTo(700, 400, 800, 500);

context.moveTo(800, 500);

context.quadraticCurveTo(900, 400, 1000, 500);

context.lineWidth = 5;

context.stroke();

context.begi

//seagull left

context.beginPath();

context.moveTo(600, 50);

context.quadraticCurveTo(650, 25, 700, 50);

context.strokeStyle = 'rgb(255, 255, 255)';

context.lineWidth = 5;

context.stroke();

var startX = 600;

var startY = 50 ;

var controlX = 650;

var controlY = 25;

var endX = 700;

var endY = 50;

//seagull right

context.beginPath();

context.moveTo(700, 50);

context.quadraticCurveTo(750, 25, 800, 50);

context.strokeStyle = 'rgb(255, 255, 255)';

context.lineWidth = 5;

context.stroke();

var startX = 700;

var startY = 50 ;

var controlX = 750;

var controlY = 25;

var endX = 800;

var endY = 50;

//seagull far left left side

context.beginPath();

context.moveTo(50, 200);

context.quadraticCurveTo(75, 175, 100, 200);

context.strokeStyle = 'rgb(255, 255, 255)';

context.lineWidth = 5;

context.stroke();

var startX = 50;

var startY = 200 ;

var controlX = 75;

var controlY = 175;

var endX = 100;

var endY = 200;

//seagull far left right side

context.beginPath();

context.moveTo(100, 200);

context.quadraticCurveTo(125, 175, 150, 200);

context.strokeStyle = 'rgb(255, 255, 255)';

context.lineWidth = 5;

context.stroke();

var startX = 100;

var startY = 200 ;

var controlX = 175;

var controlY = 150;

var endX = 150;

var endY = 200;

// seagull middle

context.beginPath();

context.moveTo(200, 150);

context.quadraticCurveTo(250, 100, 300, 150);

context.strokeStyle = 'rgb(255, 255, 255)';

context.moveTo(300, 150);

context.quadraticCurveTo(350, 100, 400, 150);

context.lineWidth = 5;

context.strokeStyle = 'rgb(255, 255, 255)';

context.stroke();

var startX = 200;

var startY = 150 ;

var controlX = 250;

var controlY = 100;

var endX = 300;

var endY = 150;

var startX = 300;

var startY = 150 ;

var controlX = 350;

var controlY = 100;

var endX = 400;

var endY = 150;

//seagull near boat

context.beginPath();

context.moveTo(600, 300);

context.quadraticCurveTo(650, 250, 700, 300);

context.strokeStyle = 'rgb(255, 255, 255)';

context.moveTo(700, 300);

context.quadraticCurveTo(750, 250, 800, 300);

context.strokeStyle = 'rgb(255, 255, 255)';

context.lineWidth = 5;

context.stroke();

var startX = 600;

var startY = 300 ;

var controlX = 650;

var controlY = 250;

var endX = 700;

var endY = 300;

var startX = 700;

var startY = 300 ;

var controlX = 750;

var controlY = 250;

var endX = 800;

var endY = 300;

// flag pole

context.beginPath();

context.moveTo(450, 300);

context.lineTo(450, 50);

context.strokeStyle = 'rgb(0, 0, 0)';

context.fill();

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(600, 150);

context.lineTo(450, 150);

context.strokeStyle = 'rgb(0, 0, 0)';

context.fill();

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(450, 50);

context.lineTo(600, 150);

context.strokeStyle = 'rgb(0, 0, 0)';

context.fill();

context.lineWidth = 5;

context.stroke();

// Circle

context.beginPath();

context.arc(0, 0, 130, 0, 2 * Math.PI, false);

context.lineCap = "round";

context.lineWidth = 3;

context.fillStyle = 'rgb(255, 255, 0)';

context.fill();

context.stroke();

//fishing pole

context.beginPath();

context.moveTo(300, 300);

context.lineTo(250, 200);

context.lineWidth = 5;

context.stroke();

//string of fishing pole

context.beginPath();

context.moveTo(250, 200);

context.lineTo(150, 500);

context.strokeStyle = 'rgb(250, 250, 250)';

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(350, 550);

context.quadraticCurveTo(300, 500, 250, 550);

context.fill();

context.lineWidth = 5;

context.stroke();

// part of fish body

context.beginPath();

context.moveTo(250, 550);

context.quadraticCurveTo(300, 600, 350, 550);

context.fillStyle = 'rgb(255, 128, 64)';

context.fill();

context.lineWidth = 5;

context.stroke();

context.fillStyle = 'rgb(300, 100, 100)';

//fish tail

context.beginPath();

context.moveTo(350, 550);

context.lineTo(375, 525, 575, 350, 550);

context.fillStyle = 'rgb(255, 128, 64)';

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(375, 525);

context.lineTo(375, 575);

context.fillStyle = 'rgb(255, 128, 64)';

context.lineWidth = 5;

context.stroke();

context.beginPath();

context.moveTo(375, 575);

context.lineTo(350, 550);

context.fillStyle = 'rgb(255, 128, 64)';

context.lineWidth = 5;

context.stroke();

//hook

context.beginPath();

context.moveTo(150, 500);

context.quadraticCurveTo(150, 550, 175, 525);

context.strokeStyle = 'rgb(250, 250, 250)';

context.lineWidth = 2;

context.stroke();

//Bottom Waves Shape

context.beginPath();

context.moveTo(x, y);

context.lineTo(0,550);

context.quadraticCurveTo(controlX1, controlY1, x1, y1);

context.quadraticCurveTo(controlX2, controlY2, x2, y1);

context.quadraticCurveTo(controlX3, controlY1, x3, y1);

context.quadraticCurveTo(controlX4, controlY2, x4, y1);

context.quadraticCurveTo(controlX5, controlY1, x5, y1);

context.quadraticCurveTo(controlX6, controlY2, x6, y1);

context.quadraticCurveTo(controlX7, controlY1, x7, y1);

context.quadraticCurveTo(controlX8, controlY2, x8, y1);

context.lineTo(850, 605);

context.lineTo(-10,605);

context.fillStyle = 'rgb(75, 75, 200)';

context.fill();

context.strokeStyle = 'rgb(95, 95, 210)';

context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>

</head>

<body>

</body>

</html>

Daniella in a Nutshell

Wednesday, September 19, 2012

Picture Using HTML codes

No comments:

Post a Comment