<canvas> HTML Canvas tag<canvas id="my_canvas" width="500" height="200"></canvas>We can draw graphics , animation, lines ,circles etc on the canvas. We can use JavaScript or JQuery to add graphics to a canvas. <canvas id="my_canvas" width="500" height="200" style="border:1px solid #000000;"></canvas>To access the Canvas element we will first try to JavaScript var my_canvas = document.getElementById('my_canvas'); var gctx = my_canvas.getContext('2d');By Jquery var my_canvas=$('#my_canvas').get(0) var gctx = my_canvas.getContext("2d"); Adding Text
Drawing Linesx: Horizontal coordinate from left edgey: Vertical coordinate from Top
Drawing Rectanglesx: Horizontal coordinate from left edgey: Vertical coordinate from Top Height: Height of the rectangle Width: Widht of hte rectangle
Drawing Arc or Circlegctx.arc(x, y, r, startAngle, endAngle, anticlockwise);x: Horizontal coordinate from left edge y: Vertical coordinate from Top r : Radius of Arc or Circle startAngle: Staring angle endAngle: Ending angle anticlockwise : (optional) Boolean. True for anticlockwise , False for clockwise direction of arc
Adding Shadow
FILL
Drawing Curves , Graphs , Grids on Canvas
Rotate , transform on Canvas
This article is written by plus2net.com team.
|
| |