OOP Using Java - GTU Programs: January 2022

(2) DV Lab-2- Develop the Program Using HTML5 SVG TAG

2-C: Develop the Different basic Graphical Shapes using HTML5 SVG Tag

File Name= DV Lab-2c-1.html

Program Code:

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas example with various methods </title>

window.onload=function() {

var w3rcanvas=document.getElementById("w3rCanvasTag");

var w3rcontext=w3rcanvas.getContext('2d');

w3rcontext.fillStyle='rgb(0,0,255)'; //Sets the color used for filling an area

w3rcontext.fillRect(0,0,400,400); //Fills a rectangle positioned at x and y, with a width and height of w and h.

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

w3rcontext.fillRect(50,50,300,300);

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

w3rcontext.fillRect(100,100,200,200);

w3rcontext.fillStyle='rgb(100,100,100)';

w3rcontext.fillRect(125,175,150,25);

}

</script>

</head>

<body>

<div>

</div>

</body>

</html>

Output:

2-C: Develop the Different basic Graphical Shapes using HTML5 SVG Tag

File Name= DV Lab-2c-2.html

Program Code:

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas gradient example</title>

window.onload=function() {

var w3rcanvas=document.getElementById("w3rCanvasTag");

var w3rcontext=w3rcanvas.getContext('2d');

var w3rgradient=w3rcontext.createRadialGradient(300,300,0,300,300,300);

w3rgradient.addColorStop("0","magenta");// Adds a color stop to a gradient. A color stop is a position in the gradient where a color change occurs. The offset must be between 0 and 1.

w3rgradient.addColorStop(".25","blue");

w3rgradient.addColorStop(".50","green");

w3rgradient.addColorStop(".75","yellow");

w3rgradient.addColorStop("1.0","red");

w3rcontext.fillStyle=w3rgradient;

w3rcontext.fillRect(0,0,400,400);

}

</script>

</head>

<body>

</body>

</html>

Output:

2-D: Develop the Different Advanced Graphical Shapes using HTML5 SVG

File Name= DV Lab-2D-1.html

Program Code:

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas Demo</title>

<!--[if IE]>

<![endif]-->

window.onload=function() {

var mycontext1=document.getElementById("myCanvasTag1").getContext('2d');

var mycontext2=document.getElementById("myCanvasTag2").getContext('2d');

var mycontext3=document.getElementById("myCanvasTag3").getContext('2d');

var mycontext4=document.getElementById("myCanvasTag4").getContext('2d');

// gradient 1

var mygradient1=mycontext1.createLinearGradient(30,30,90,90);

mygradient1.addColorStop(0,"#FF0000");

mygradient1.addColorStop(1,"#00FF00");

mycontext1.fillStyle=mygradient1;

mycontext1.fillRect(0,0,100,100);

// gradient 2

var mygradient2=mycontext2.createLinearGradient(30,30,90,90);

mygradient2.addColorStop(1,"#FF0000");

mygradient2.addColorStop(0,"#00FF00");

mycontext2.fillStyle=mygradient2;

mycontext2.fillRect(0,0,100,100);

var mygradient3=mycontext3.createLinearGradient(30,30,90,90);

mygradient3.addColorStop(0,"#0000FF");

mygradient3.addColorStop(.5,"#00FFDD");

mycontext3.fillStyle=mygradient3;

mycontext3.fillRect(0,0,100,100);

var mygradient4=mycontext1.createLinearGradient(30,30,90,90);

mygradient4.addColorStop(0,"#DD33CC");

mygradient4.addColorStop(1,"#EEEEEE");

mycontext4.fillStyle=mygradient4;

mycontext4.fillRect(0,0,100,100);

}

</script>

</head>

<body>

</canvas>

</canvas>

<br />

</canvas>

</canvas>

</div>

</body>

</html>

Output:

2-C: Develop the Different basic Graphical Shapes using HTML5 SVG Tag

File Name= DV Lab-2c-3.html

Program Code:

<!DOCTYPE html>

<html>

<body>

<circle cx="50" cy="50" r="40"

stroke="green" stroke-width="4" fill="yellow" />

Sorry, your browser does not support inline SVG.

</svg>

<br>

</svg>

<br>

<rect x="50" y="20" rx="20" ry="20" width="150" height="150"

style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

</svg>

<br>

<polygon points="100,10 40,198 190,78 10,78 160,198"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

<br>

<defs>

</linearGradient>

</defs>

Sorry, your browser does not support inline SVG.

</svg>

<br>

</body>

</html>

Output:

(2) DV Lab-2- Develop the Program Using HTML5 CANVAS and SVG TAG

2-A: Develop the Different basic Graphical Shapes using HTM5 CANVAS

File Name= DV Lab-2a.html

Program Code:

<!DOCTYPE html>

<head>

<title>Canvas Into HTML Pages</title>

<style>

canvas {

border: 3px solid #000;

}

</style>

window.onload = function() {

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

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

// draw stuff here

};

</script>

</head>

<body>

</body>

</html>

Output:

2-B: Develop the Different basic Graphical Shapes using HTM5 CANVAS

File Name= DV Lab-2b.html

Program Code:

<!DOCTYPE html>

<head>

<title>Drawing a Line on the Canvas</title>

<style>

canvas {

border: 1px solid #000;

}

</style>

window.onload = function() {

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

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

context.moveTo(50, 150);

context.lineTo(250, 50);

context.stroke();

};

</script>

</head>

<body>

</body>

</html>

Output:

2-C: Develop the Different Advanced Graphical Shapes using HTM5 CANVAS

File Name= DV Lab-2c.html

Program Code:

<!DOCTYPE html>

<head>

<title>Drawing an Arc on the Canvas</title>

<style>

canvas {

border: 1px solid #000;

}

</style>

window.onload = function() {

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

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

context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);

context.stroke();

};

</script>

</head>

<body>

</body>

</html>

Output:

2-D: Develop the Different Advanced Graphical Shapes using HTM5 CANVAS

File Name= DV Lab-2d.html

Program Code:

<!DOCTYPE html>

<head>

<title>Drawing a Rectangle on the Canvas</title>

<style>

canvas {

border: 1px solid #000;

}

</style>

window.onload = function() {

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

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

context.fillRect(50, 50, 200, 100);

context.stroke();

};

</script>

</head>

<body>

</body>

</html>

Output:

2-E: Develop the Different Advanced Graphical Shapes using HTM5 CANVAS

File Name= DV Lab-2E.html

Program Code:

<!DOCTYPE html>

<head>

<title>Drawing a Circle on the Canvas</title>

<style>

canvas {

border: 1px solid #000;

}

</style>

window.onload = function() {

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

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

context.arc(150, 100, 70, 0, 2 * Math.PI, false);

context.stroke();

};

</script>

</head>

<body>

</body>

</html>

Output:

OOP Using Java - GTU Programs

Wednesday, January 19, 2022

DV Lab-2- Develop the Program Using HTML5 SVG TAG

DV Lab-2- Develop the Program Using HTML5 CANVAS TAG