<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Blank App</title>
<style>
#allbutton{
margin-left:400px;
}
</style>
<script type="text/javascript" src="cordova.js">
</script>
</head>
<body>
<p style="font-family:arial; font-size:50px;color:green; text-align:center; font-weight:bold;">YO Practise going on </p>
<br>
<canvas id="mycanvas" style="height:500px; width:800px; background-color:pink; border:4px solid black; margin-left:300px;"></canvas>
<img src="bikash.jpg" height=200 width=200 id="image1" style="display:none">
<br>
<div id="allbutton">
<button onclick="drawline()">Draw Line</button>
<button onclick="drawcircle()">Draw Circle</button>
<button onclick="drawrect()">Draw Rectangle</button>
<button onclick="drawimage()">Draw Image</button>
<button onclick="drawtext()">Draw Text</button>
<button onclick="clearall()">Clear All</button></div>
<script>
function drawrect()
{
var canvas=document.getElementById('mycanvas');
var gt=canvas.getContext("2d");
gt.fillStyle="red";
gt.fillRect(0,0,50,50);
}
function drawline()
{
var canvas=document.getElementById('mycanvas');
var gt=canvas.getContext("2d");
gt.fillStyle="red";
gt.moveTo(0,0);
gt.lineTo(100,200);
gt.stroke();
}
function drawcircle()
{
var canvas=document.getElementById('mycanvas');
var gt=canvas.getContext("2d");
gt.strokeStyle="blue";
gt.beginPath();
gt.arc(100,100,50,0,2*Math.PI);
gt.stroke();
}
function drawimage()
{
var canvas=document.getElementById('mycanvas');
var gt=canvas.getContext("2d");
var image1=document.getElementById("image1");
gt.drawImage(image1,0,0,200,200);
}
function clearall()
{
var canvas=document.getElementById("mycanvas");
var gt=canvas.getContext("2d");
gt.clearRect(0,0,canvas.width,canvas.height);
}
function drawtext()
{
var canvas=document.getElementById("mycanvas");
var gt=canvas.getContext("2d");
gt.font = "30px Arial";
var text1=prompt("Enter Text to display","");
gt.strokeText(text1,20,20);
}
</script>
<br> <br> <br> <br>
<svg height=300 width=800 style="background-color:yellow">
<line x1=30 y1=20 x2=50 y2=100 style="stroke:pink; stroke-width:5;"></line>
<circle cx=600 cy=100 r=30 style="stroke:red; stroke-width:10;"></circle>
<rect x=100 y=100 height=100 width=200 style="stroke:blue; stroke-width:5;"></rect>
<ellipse cx=600 cy=200 rx=20 ry=40 style="stroke:red; stroke-width:2;"></ellipse>
<text x=0 y=40 fill=red>i love u</text>
<polyline points=200,50,60,80,95,2,25,65,60,1 style="fill:none; stroke:blue;"></polyline>
<polygon points="300,10 250,190 160,310" style="fill:lime;stroke:purple;stroke-width:1" ></polygon>
</svg>
<br>
<audio src="1.mp3" controls id="audio1"></audio>
<button onclick="document.getElementById('audio1').play()">Play</button>
<button onclick="document.getElementById('audio1').pause()">Pause</button>
<button onclick="document.getElementById('audio1').pause(); document.getElementById('audio1').currentTime=0;">Stop</button>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Xy3rcoz-8rU" frameborder="0" allowfullscreen></iframe>
<br>
<embed src="https://www.youtube.com/embed/PT2_F-1esPk" width="600" height="500" frameborder="2"/>
<object widht="400" height="400" data="https://www.youtube.com/embed/PT2_F-1esPk"></object>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Blank App</title>
<style>
#allbutton{
margin-left:400px;
}
</style>
<script type="text/javascript" src="cordova.js">
</script>
</head>
<body>
<p style="font-family:arial; font-size:50px;color:green; text-align:center; font-weight:bold;">YO Practise going on </p>
<br>
<canvas id="mycanvas" style="height:500px; width:800px; background-color:pink; border:4px solid black; margin-left:300px;"></canvas>
<img src="bikash.jpg" height=200 width=200 id="image1" style="display:none">
<br>
<div id="allbutton">
<button onclick="drawline()">Draw Line</button>
<button onclick="drawcircle()">Draw Circle</button>
<button onclick="drawrect()">Draw Rectangle</button>
<button onclick="drawimage()">Draw Image</button>
<button onclick="drawtext()">Draw Text</button>
<button onclick="clearall()">Clear All</button></div>
<script>
function drawrect()
{
var canvas=document.getElementById('mycanvas');
var gt=canvas.getContext("2d");
gt.fillStyle="red";
gt.fillRect(0,0,50,50);
}
function drawline()
{
var canvas=document.getElementById('mycanvas');
var gt=canvas.getContext("2d");
gt.fillStyle="red";
gt.moveTo(0,0);
gt.lineTo(100,200);
gt.stroke();
}
function drawcircle()
{
var canvas=document.getElementById('mycanvas');
var gt=canvas.getContext("2d");
gt.strokeStyle="blue";
gt.beginPath();
gt.arc(100,100,50,0,2*Math.PI);
gt.stroke();
}
function drawimage()
{
var canvas=document.getElementById('mycanvas');
var gt=canvas.getContext("2d");
var image1=document.getElementById("image1");
gt.drawImage(image1,0,0,200,200);
}
function clearall()
{
var canvas=document.getElementById("mycanvas");
var gt=canvas.getContext("2d");
gt.clearRect(0,0,canvas.width,canvas.height);
}
function drawtext()
{
var canvas=document.getElementById("mycanvas");
var gt=canvas.getContext("2d");
gt.font = "30px Arial";
var text1=prompt("Enter Text to display","");
gt.strokeText(text1,20,20);
}
</script>
<br> <br> <br> <br>
<svg height=300 width=800 style="background-color:yellow">
<line x1=30 y1=20 x2=50 y2=100 style="stroke:pink; stroke-width:5;"></line>
<circle cx=600 cy=100 r=30 style="stroke:red; stroke-width:10;"></circle>
<rect x=100 y=100 height=100 width=200 style="stroke:blue; stroke-width:5;"></rect>
<ellipse cx=600 cy=200 rx=20 ry=40 style="stroke:red; stroke-width:2;"></ellipse>
<text x=0 y=40 fill=red>i love u</text>
<polyline points=200,50,60,80,95,2,25,65,60,1 style="fill:none; stroke:blue;"></polyline>
<polygon points="300,10 250,190 160,310" style="fill:lime;stroke:purple;stroke-width:1" ></polygon>
</svg>
<br>
<audio src="1.mp3" controls id="audio1"></audio>
<button onclick="document.getElementById('audio1').play()">Play</button>
<button onclick="document.getElementById('audio1').pause()">Pause</button>
<button onclick="document.getElementById('audio1').pause(); document.getElementById('audio1').currentTime=0;">Stop</button>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Xy3rcoz-8rU" frameborder="0" allowfullscreen></iframe>
<br>
<embed src="https://www.youtube.com/embed/PT2_F-1esPk" width="600" height="500" frameborder="2"/>
<object widht="400" height="400" data="https://www.youtube.com/embed/PT2_F-1esPk"></object>
</body>
</html>
No comments:
Post a Comment