HTML5 Canvas

By -
This is Sample Code for HTML Animation.

getContext():-this is used to draw 2d graphics

<!DOCTYPE html>
<html>
<title>HTML Drawing using Canvas</title>
<head>

 <!-- After title -- Style Comes -->
   <style>
   #canv{
                border:solid 2px red;
            }
   </style>
   
</head>
<body>
<canvas id="canv" width="500" height="300"></canvas>
 <script>
 let canvas=document.getElementById("canv");
 let graphic=canvas.getContext("2d");
  console.log(graphic);
   
   graphic.font="40px courier";
 graphic.fillText("Pranay Canvas",50,50);
 graphic.strokeStyle="orange";
</script>
</body>

</html>
_________________________________________________________________________________
Output of Above code
_________________________________________________________________________________
Now if you want to color the Text then use method "  graphic.strokeText"

<!DOCTYPE html>
<html>
<title>HTML Drawing using Canvas</title>
<head>

 <!-- After title -- Style Comes -->
   <style>
   #canv{
                border:solid 2px red;
            }
   </style>
   
</head>
<body>
<canvas id="canv" width="500" height="300"></canvas>
 <script>
 let canvas=document.getElementById("canv");
 let graphic=canvas.getContext("2d");
  console.log(graphic);
    graphic.font="40px courier";
   graphic.strokeStyle="orange";
   graphic.strokeText("Pranay canvas",50,50);
     console.log("message");

 </script>
</body>

</html>


___________________________________________________________________________
Drawing Rectangle in canvas

 To draw shape in canvas , use below function 

 fillRect(x,y,width,height) x-axis , y axis will form the shape
fillstyle will fill the box with mentioned color
Sample Code 

 <!DOCTYPE html>
<html>
<title>HTML Drawing using Canvas</title>
<head>

 <!-- After title -- Style Comes -->
   <style>
   #canv{
                border:solid 2px red;
            }
   </style>
   
</head>
<body>
<canvas id="canv" width="500" height="300"></canvas>
 <script>
 let canvas=document.getElementById("canv");
 let graphic=canvas.getContext("2d");
  console.log(graphic);
   graphic.fillStyle="orange";
   graphic.fillRect(50,50,200,200);

</script>
</body>

</html>

_________________________________________________________________________________Output of above code
HTML Drawing using Canvas _________________________________________________________________________________

 strokeRect(x,y,width,height) x-axis , y axis will form the shape
strokeStyle will fill the border of the box with mentioned color

 <!DOCTYPE html>
<html>
<title>HTML Drawing using Canvas</title>
<head>

 <!-- After title -- Style Comes -->
   <style>
   #canv{
                border:solid 2px red;
            }
   </style>
   
</head>
<body>
<canvas id="canv" width="500" height="300"></canvas>
 <script>
 let canvas=document.getElementById("canv");
 let graphic=canvas.getContext("2d");
  console.log(graphic);
   graphic.strokeStyle="orange";
   graphic.strokeRect(50,50,200,200);

</script>
</body>
</html>
______________________________________________________________________________





HTML5 ARC Tutorial

 __________________________________________________________________________


<!DOCTYPE html>
<html>
<title>Arc tutorial by Pranay Tiwari</title>
<head>
<style>
#canva{
       border:solid 2px red; 
     }
</style>
</head>
<body>
<canvas id="canva" width="300" height="300"></canvas>
<script>
 let drawele=document.getElementById("canva");
 let graphic=drawele.getContext("2d");
 graphic.strokeStyle="red";
 graphic.arc(150,150,150,0,2*Math.PI);
   graphic.stroke();
</script>
</body>
</html>

_____________________________________________________________________________


________________________________________________________________________

changine the value in above code with below one , arc will change
 graphic.arc(150,150,150,0,1.5*Math.PI);





The arc() method creates an arc/curve (used to create circles, or parts of circles).
Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI.
Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas.




Center
arc(100,75,50,0*Math.PI,1.5*Math.PI)
Start angle
arc(100,75,50,0,1.5*Math.PI)
End angle
arc(100,75,50,0*Math.PI,1.5*Math.PI)
JavaScript syntax:context.arc(x,y,r,sAngle,eAngle,counterclockwise);





Sample code 

<!DOCTYPE html>
<html>
<title>Arc tutorial by Pranay Tiwari</title>
<head>
<style>
#canva{
       border:solid 2px red; 
     }
</style>
</head>
<body>
<canvas id="canva" width="300" height="300"></canvas>
<script>
 let drawele=document.getElementById("canva");
 let graphic=drawele.getContext("2d");
 graphic.strokeStyle="red";
  graphic.beginPath();
  graphic.arc(150,150,150,0,2*Math.PI);
  graphic.stroke();
  graphic.beginPath();
  graphic.strokeStyle="orange";
  graphic.arc(150,150,130,0,2*Math.PI);
  graphic.stroke();
  graphic.strokeStyle="blue";
  graphic.beginPath();
 graphic.arc(150,150,100,0,2*Math.PI);
   graphic.stroke();
    graphic.strokeStyle="pink";
     graphic.beginPath();
 graphic.arc(150,150,50,0,2*Math.PI);
   graphic.stroke();
</script>
</body>
</html>
Sample Code 2 
<!DOCTYPE html>
<html>
<title>Arc tutorial by Pranay Tiwari</title>
<head>
<style>
#canva{
       border:solid 2px red; 
     }
</style>
</head>
<body>
<canvas id="canva" width="300" height="300"></canvas>
<script>
 let drawele=document.getElementById("canva");
 let graphic=drawele.getContext("2d");
 graphic.fillStyle="red";
  graphic.beginPath();
  graphic.arc(150,150,150,0,2*Math.PI);
  graphic.fill();
  graphic.beginPath();
  graphic.fillStyle="orange";
  graphic.arc(150,150,130,0,2*Math.PI);
  graphic.fill();
  graphic.fillStyle="blue";
  graphic.beginPath();
 graphic.arc(150,150,100,0,2*Math.PI);
   graphic.fill();
    graphic.fillStyle="pink";
     graphic.beginPath();
 graphic.arc(150,150,50,0,2*Math.PI);
   graphic.fill();
</script>
</body>
</html>


 Another sample HTML Animation code

 <!DOCTYPE html>
<html>
<head>
<title>Animation by Pranay Tiwari</title>
<style>
      #canva{
                border:solid 2px red;
            }
     
</style>
<body>
</head>
<canvas id="canva"  width="300" height="300"></canvas>
<script>
let drawEle=document.getElementById("canva");
let graphic=drawEle.getContext("2d");
let x=50;
let y=50;
function animation()
{
 console.log(graphic);
 graphic.beginPath();
graphic.fillStyle="rgba(0,0,0,0.05)";
graphic.fillRect(0,0,drawEle.width,drawEle.height);
graphic.beginPath();
graphic.fillStyle="white";
graphic.arc(x,y,50,0,2*Math.PI);
 x++;
if (x>=250)
{
x=250;
y++;
}
  graphic.fill();
}
   setInterval("animation()",50);
</script>

 </body>
</html> 





Pranay is a versatile Oracle Technical consultant. Adept in Oracle ERP development, SDLC management, design, and architecture. He has 11 years of extensive experience in Oracle Apps implementation engaged in technical development areas of Oracle Applications 11i/R12 E-Business Suite. He possesses sound knowledge in technologies like OAF, ADF, J2EE, MSCA, Oracle PaaS Cloud, Java Cloud services, ADF & XML Publisher. Currently, he is working for BirlaSoft Inc. USA. Being a Consistent solution provider in Oracle Developer Community forums earned him the title of "Technology Master”, Currently he holds 3rd position globally for providing a solution in Oracle Developer Community for the OAF Workspace. He has also authored several articles on ADF Technology, Fusion Financials, OAF & PaaS Cloud. He successfully presented the case study in Oracle Collaborate event forum on "How optimizing the Oracle Mobile App Solution Helped in Boosting the Productivity of a Warehouse."

Comments

Post a Comment

Popular posts from this blog

REST integration built-in OIC to read Large files with size more than 10MB

By -
Image
Processing large files in any integration requires a lot of effort and complex coding. Every integration platform has a limit size to read a file, similarly, the OIC service provides a limit of 10MB to read the file, if the size exceeds, then the below error will be encountered  Error Reason: Translation Error. Translation Error. Error while translating message to native format. Please make sure that the payload for the outbound interaction conforms to the schema and payload size does not exceed threshold. Error occured as File size exceeds maximum threshold size of 10 MB : Application Error Error Summary: ICS runtime execution error  In this article, we will learn how to read the big-size file in OIC.  Note only XML and CSV formats are supported for larger file read operations.  Here we will build an integration with a source FTP connector to read files containing sizes more than 10 MB  &  read them through the "Read File in Chunks" features and create multiple files  at
Read more

Basic Concepts of OAF (Oracle Applications FrameWork )

By -
Image
OAF stands for Oracle Applications Framework. This particular technology will be used to  develop Application pages , all pages will be of Web base. In Previous versions of Oracle Ebiz , Oracle Forms has been widely used to develop transactions forms , but due to its heavy nature & Time consuming Performance ,it becomes very  difficult to carry out Business operations. To improve the Performance , Oracle has introduced OAF. Oracle Application Framework (OAF) is an architecture for creating web based pages with in Oracle EBS platform.  OAF functionality can be achieved using JDEVELOPER Tool. OAF follows MVC architecute. MVC stands for Module View Controller Architecture  Schematic representation of MVC Architecture  Model (bc4j Component) Model contains the BC4J Components or objects which handles data directly from Database. It Includes Business Components for Java (BC4J Objects) which mainly are: • Entity Object • View Object • Application Module
Read more