CNAVAS GRADIENTS

Canvas can be used to drow graphs, make photo compositions or do simple animations. Canvas a rectangle area like white paper, we can call many functions on a canvas

Canvas can draw colorful Line, Circle, and Rectangle without animations.

Canvas Drawing Example

<canvas id="myCanvas" width="200" height="100"></canvas>

Methods to Draw Line

These are line, methods we are using for draw line:

  • begainPath();
  • moveTo(x, y); - It define the position.
  • lineTo(x, y); - It define the coordinates
  • fill(); - Example (fillRect(x, y, width, height, opecity)).
  • stroke(); - Its make a line visible.
  • closePath(); - Its close the othere unvisible line.
  • fillStyle = "rgba(0,0,0, opicity)"
  • lineCop = "round"; - It use to give shap of line.
<script>
  var c = document.getElementById("myCanvas");
  var context = c.getContext("2d");
  context.moveTo(0, 0);
  context.lineTo(200, 100);
  context.stroke();
</script>

Methods to Draw Circle

These are circle methods, we are using for draw circle:

  • arc(x, y, radius, startAngle, endAngle(2*Math.IP), false);
  • arc styled methods - lineWidth(); strokeStyle(); lineCap();

ARC methods define with:

arc(); - method of the canvas 2D API adds an arc to the path which is centered at (x, y) position with radius r atarting at starAngle and ending at endAngle.

  • x, y coordinates of the arc's center point
  • A radius (r)
  • A startAngle, and endAngle - measured clockwise from the positive x axis
  • An optional boolean - if true, the arc to be drawn counter clockwise between the two angle.
<script>
  var c = document.getElementById("myCanvas");
  var context = c.getContext("2d");
  context.begainPath();
  context.acr(95, 50, 40, 0, 2*Math.PI);
  context.stroke();
</script>

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved