HTML 5 Graphics

By | April 4th 2018 04:36:05 PM | viewed 287 times
Graphics Name Code
Draw a Line <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;" > </canvas >
<script>
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();
</script>
Draw a Circle <canvas id="myCanvas2" width="200" height="100" style="border:1px solid #000000;" > </canvas >
<script>
var c = document.getElementById("myCanvas2"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
</script>
Draw a Text <canvas id="myCanvas3" width="200" height="100" style="border:1px solid #000000;" > </canvas >
<script>
var c = document.getElementById("myCanvas3"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50);
</script>
Stroke Text <canvas id="myCanvas4" width="200" height="100" style="border:1px solid #000000;" > </canvas >
<script>
var c = document.getElementById("myCanvas4"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,50);
</script>
Draw Linear Gradient <canvas id="myCanvas5" width="200" height="100" style="border:1px solid #000000;" > </canvas >
<script>
var c = document.getElementById("myCanvas5"); var ctx = c.getContext("2d"); // Create gradient var 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>
Draw Circular Gradient <canvas id="myCanvas6" width="200" height="100" style="border:1px solid #000000;" > </canvas >
<script>
var c = document.getElementById("myCanvas6"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80);
</script>
Draw Image <canvas id="myCanvas7" width="200" height="100" style="border:1px solid #000000;" > </canvas >
<script>
var c = document.getElementById("myCanvas7"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img,10,10);
</script>
SVG Circle <svg width="100" height="100" >
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
</svg >
SVG Rectangle <svg width="400" height="100" >
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"/>
</svg >
SVG Rounded Rectangle <svg width="400" height="180" >
<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 >
SVG Star <svg width="300" height="200" >
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg >
SVG Logo <svg height="130" width="500" >
<defs >
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient >
</defs >
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86" ></text >
</svg >
bONEandALL
Visitor

Total : 19436

Today :33

Today Visit Country :

  • United States
  • The Netherlands
  • Singapore
  • Russia
  • China
  • India
  • Japan