CMA Record BCA 4th Sem
CMA Record BCA 4th Sem
<html>
<head>
<title> basic tags html</title>
</head>
<p><i><u><b> SGT COLLEGE BALLARI</p></i></u></b>
<h1>Bachelor's in Computer Application</1h>
<h2>Bachelor's in Computer Application</h2>
<h3>Bachelor's in Computer Application</h3>
<h4>Bachelor's in Computer Application</h4>
<h5>Bachelor's in Computer Application</h5>
<h6>Bachelor's in Computer Application</h6>
</body>
</html>
Output
SGT COLLEGE BALLARI
<html>
<head>
<title> welcome to html</title>
</head>
<body>
<video control autoplay muted loop width="250" height="250"
<video src="C:\Users\HP\Desktop\Planet Earth_ Amazing.mp4" controls>
</video>
<br>
<br>
<audio controls>
<source src="E:\songs\Dosti.mp3.Mp3">
</audio>
</body>
</html>
Output
<html>
<head>
<title>svg circle and rectangle</title>
</head>
<body>
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"
fill="red"/>
</svg><br><br>
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;
stroke:rgb(0,0,0)"/>
</svg>
</body>
</html>
Output
<html>
<head>
<title>svg eclipse and star</title>
</head>
<body>
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:gold;stroke-width:2"/>
</svg><br><br>
<svg height="210" width="500">
<polygon points="100,10 40, 198 190, 78 10, 78 160, 198"
style="fill:lime;stroke:violet;strokewidth:5;fill-rule:nonzero;"/>
</svg>
</body>
</html>
Output
<html>
<head>
<title>svg line</title>
</head>
<body>
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
</body>
</html>
Output
Output
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
Output
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function()
{
var pattern = context.createPattern(imageObj, 'repeat');
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = pattern;
context.fill();
};
imageObj.src =
'http://www.html5canvastutorials.com/demos/assets/wood-
pattern.png';
</script>
</body>
</html>
Department of Computer Science, BCA 4th Semester Page 19
S.G.T COLLEGE, BELLARY.
Output
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The translate() Method</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px
solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>
Output
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The rotate() Method</h2>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50, 20, 100, 50);
</script>
</body>
</html>
Output
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The scale() Method</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px
solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
</script>
</body>
</html>
Output
<html>
<head>
<style>
#test{
width: 100px;
height:100px;
margin: 0px auto; }
</style>
<script type = "text/javascript">
function drawShape() {
var canvas = document.getElementById('mycanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas">
</canvas>
</body>
</html>
Output
<html>
<head>
<title>web page</title>
<style type="text/css">
#test {
width:100px;
height:100px;
margin:0px auto;
}
</style>
<script type="text/javascript">
function drawShape()
{
var canvas =document.getElementById('mycanvas');
if(canvas.getContext)
{
var ctx=canvas.getContext('2d');
for(var i=0;i<10;i++)
{
for(var j=0;j<10;j++)
{
ctx.strokeStyle ='rgb(255,'+Math.floor(50-2.5*i)+','+
Math.floor(155-22.5*j )+')';
ctx.beginPath();
ctx.arc(1.5+j*25,1.5+i*25,10,10,Math.PI*5.5,true);
ctx.stroke();
}
Output
<html>
<head>
<title>Example for Canvas-Gradients</title>
</head>
<body>
<canvas id = "myCanvas" width="400" height="400"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Create gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
Output