Canvas learning Chapter 1

One ： Drawing graphics

1: Draw a solid rectangle

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect(10, 10, 55, 50);

2: Draw a rectangular border

ctx.fillStyle = "rgb(200,0,0)";
ctx.strokeRect(10, 10, 55, 50);

3: Clear the specified rectangular area , Make the clear part completely transparent .

clearRect(x, y, width, height)

4: Case study

 var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.fillRect(25, 25, 100, 100);
        ctx.clearRect(45, 45, 60, 60);
        ctx.strokeRect(50, 50, 50, 50);

Two ： Draw the path

The basic element of graphics is path . A path is a collection of points of different shapes formed by connecting lines or curves of different colors and widths . A path , Even a subpath , It's all closed . Drawing a graph using a path requires some extra steps .

1: First , You need to create a path starting point .
2: Then you use the draw command to draw the path .
3: Then you close the path .
4: Once the path is generated , You can render graphics by tracing or filling the path area .
Here are the functions to use ：

1:beginPath()
Create a new path , Generated after , The drawing command is directed to the path to generate the path .
closePath()
2: After closing the path, the drawing command points back to the context .
3:stroke()
Draw the outline of a figure by lines .
4:fill()
Generate solid graphics by filling the content area of the path .

Case study ：

 ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();

Move the strokes ：
moveTo(x, y)
Move the stroke to the specified coordinates x as well as y On .
lineTo(x, y)
Draw a line from the current position to the specified x as well as y Line of position .

This method has two parameters ：x as well as y , The point representing the end of the line in the coordinate system . The starting point is related to the previous drawing path , The end of the previous path is the beginning of the next , wait ... You can start with moveTo() The function change .

Case study ：

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');

  //  Fill in triangles 
  ctx.beginPath();
  ctx.moveTo(25, 25);
  ctx.lineTo(105, 25);
  ctx.lineTo(25, 105);
  ctx.fill();

  //  Stroke triangle 
  ctx.beginPath();
  ctx.moveTo(125, 125);
  ctx.lineTo(125, 45);
  ctx.lineTo(45, 125);
  ctx.closePath();
  ctx.stroke();
  }
}

3、 ... and ： Draw the arc

arc(x, y, radius, startAngle, endAngle, anticlockwise)
Draw a picture of （x,y） Centered on radius Arc of radius （ round ）, from startAngle Start to endAngle end , according to anticlockwise Given direction （ Default is clockwise ） To generate .

arcTo(x1, y1, x2, y2, radius)[ Not commonly used ]
Draw an arc according to the given control point and radius , Then connect the two control points in a straight line .

Case study ：

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    for(var i = 0; i < 4; i++){
      for(var j = 0; j < 3; j++){
        ctx.beginPath();
        var x = 25 + j * 50; // x  Coordinate value 
        var y = 25 + i * 50; // y  Coordinate value 
        var radius = 20; //  Radius of arc 
        var startAngle = 0; //  Starting point 
        var endAngle = Math.PI + (Math.PI * j) / 2; //  The end point 
        var anticlockwise = i % 2 == 0 ? false : true; //  Clockwise or counter clockwise 

        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

        if (i>1){
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}