Posts

HTML Canvas Translate program

Image
                          Rajeev Tiwari HTML canvas  translate()  Method (1). <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillRect(10, 10, 100, 50); ctx.translate(70, 70); ctx.fillRect(10, 10, 100, 50); </script> </body> </html> (2). <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillS...
Post a Comment
Read more

HTML Canvas path Program

Image
                          Rajeev Tiwari HTML canvas  beginPath()  Method (1) <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath();               ctx.lineWidth = "5"; ctx.strokeStyle = "green";  // Green path ctx.moveTo(0, 75); ctx.lineTo(250, 75); ctx.stroke();  // Draw it ctx.beginPath(); ctx.strokeStyle = "purple";  // Purple path ctx.moveTo(50, 0); ctx.lineTo(150, 130);             ctx.stroke();  // Draw it </script> </body> </html> (2)  <!DOCTYPE html> <html> ...
Post a Comment
Read more

HTML Canvas Draw program

Image
                          Rajeev Tiwari Draw a Circle To draw a circle on a canvas, use the following methods: beginPath() - begins a path arc(x,y,r,startangle,endangle) - creates an arc/curve. To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI. The x and y parameters define the x- and y-coordinates of the center of the circle. The r parameter defines the radius of the circle. (1) <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script>  </body> </html> (2)  <!DOCTYPE html> <html> ...
Post a Comment
Read more

HTML Canvas program

Image
                          Rajeev Tiwari Canvas Example In HTML, a <canvas> element looks like this: (1)  <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> </body> </html> HTML Canvas  Drawing (2)   <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); </script> </body> </html> HTML Canvas  Coordinates Canvas Coordinates The HTML canvas is a two-dimensional grid. T...
Post a Comment
Read more

HTML SVG Introduction

Image
                          Rajeev Tiwari SVG Elements Element Description Attributes <a> Creates a link around SVG elements xlink:show xlink:actuate xlink:href target <altGlyph> Provides control over the glyphs used to render particular character data x y dx dy rotate glyphRef format xlink:href <altGlyphDef> Defines a substitution set for glyphs id <altGlyphItem> Defines a candidate set of glyph substitutions id <animate> Defines how an attribute of an element changes over time attributeName="the name of the target attribute" by="a relative offset value" from="the starting value" to="the ending value" dur="the duration" repeatCount="the number of time the animation will take place" <animateMotion> Causes a referenced element to move along a motion path calcMode="the interpolation mode for the animation. Can be 'discrete', 'linear', 'paced', 'spl...
Post a Comment
Read more

HTML SVG Star program

Image
                          Rajeev Tiwari (1) <!DOCTYPE html> <html> <body> <svg height="210" width="500">   <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>   Sorry, your browser does not support inline SVG. </svg> </body> </html> (2) <!DOCTYPE html> <html> <body> <svg height="210" width="500">   <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>   Sorry, your browser does not support inline SVG. </svg> </body> </html> मैं इस ब्लॉग का संस्थापक और एक पेशेवर ब्लॉगर हूं। यहाँ पर मैं नियमित रूप से अपने पाठकों के लिए उपयोगी और मददगार जानकारी शेयर करता हूं। Written by Rajeev Tiwari
Post a Comment
Read more

HTML SVG Scale Rotate move Animation

Image
                          Rajeev Tiwari (1)  <!DOCTYPE html> <html> <body> <p><strong>Note:</strong> This example does not work in Internet Explorer and Safari.</p> <svg width="500" height="500">   <g transform="translate(100,100)">     <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG!       <animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze" />     </text>   </g>   Sorry, your browser does not support inline SVG.   </svg> </body> </html> (2)  <!DOCTYPE html> <html> <body> <p><strong>Note:</strong> This example does not work in Internet Explorer and Safari.</p> <svg width="600" height="600">   <g transform="translate(1...
Post a Comment
Read more