Drawing line of HTML5 canvas basic drawing

Time:2021-4-17

<canvas></canvas>It is a new tag added in HTML5 for drawing graphics. In fact, like other tags, this tag is special in that it can obtain a canvasrenderingcontext2d object, which can be controlled by JavaScript script for drawing.

<canvas></canvas>It’s just a container for drawing graphics. In addition to ID, class, style and other attributes, there are also height and width attributes. There are three main steps in drawing on < canvas > > elements

1. Get the DOM object corresponding to the < canvas > element, which is a canvas object;
2. Call getcontext () method of canvas object to get a canvasrenderingcontext2d object;
3. Call canvasrenderingcontext2d object to draw.

line properties

In addition to the linewidth attribute used above, lines have the following attributes:

 •lineCapProperty to set or return the style of line cap at the end of line. You can take the following values:
“But” adds a straight edge to each end of the line (default);
“Round” adds a round cap to each end of the line;
Square adds a square cap to each end of the line.

 •lineJoinProperty sets or returns the type of corner created when two lines meet. You can take the following values:
“Miter” creates sharp corners (default);
“Bevel” creates bevel angle;
Round creates a fillet.

 •miterLimitProperty to set or return the maximum miter length (10 by default). Miter length refers to the distance between the inner and outer corners at the intersection of two lines. Miterlimit is valid only if the linejoin property is “miter”.  

JavaScript CodeCopy content to clipboard

  1. var canvas = document.getElementById(“canvas”);   
  2.     var context = canvas.getContext(“2d”);   
  3.     //Test linecap property  
  4.     //Set the baseline for easy observation  
  5.     context.moveTo(10,10);   
  6.     context.lineTo(10,200);   
  7.     context.moveTo(200,10);   
  8.     context.lineTo(200,200);   
  9.     context.lineWidth=“1”;   
  10.     context.stroke();   
  11.     //butt   
  12.     context.beginPath();   
  13.     context.moveTo(10,50);   
  14.     context.lineTo(200,50);   
  15.     context.lineCap=“butt”;   
  16.     context.lineWidth=“10”;   
  17.     context.stroke();   
  18.     //round   
  19.     context.beginPath();   
  20.     context.moveTo(10,100);   
  21.     context.lineTo(200,100);   
  22.     context.lineCap=“round”;   
  23.     context.lineWidth=“10”;   
  24.     context.stroke();   
  25.     //square   
  26.     context.beginPath();   
  27.     context.moveTo(10,150);   
  28.     context.lineTo(200,150);   
  29.     context.lineCap=“square”;   
  30.     context.lineWidth=“10”;   
  31.     context.stroke();   
  32.   
  33.     //Test linjoin property  
  34.     //miter   
  35.     context.beginPath();   
  36.     context.moveTo(300,50);   
  37.     context.lineTo(450,100);   
  38.     context.lineTo(300,150);   
  39.     context.lineJoin=“miter”;   
  40.     context.lineWidth=“10”;   
  41.     context.stroke();   
  42.     //round   
  43.     context.beginPath();   
  44.     context.moveTo(400,50);   
  45.     context.lineTo(550,100);   
  46.     context.lineTo(400,150);   
  47.     context.lineJoin=“round”;   
  48.     context.lineWidth=“10”;   
  49.     context.stroke();   
  50.     //square   
  51.     context.beginPath();   
  52.     context.moveTo(500,50);   
  53.     context.lineTo(650,100);   
  54.     context.lineTo(500,150);   
  55.     context.lineJoin=“bevel”;   
  56.     context.lineWidth=“10”;   
  57.     context.stroke();   
  58.   
  59.     //Test the miterlimit property  
  60.     context.beginPath();   
  61.     context.moveTo(700,50);   
  62.     context.lineTo(850,100);   
  63.     context.lineTo(700,150);   
  64.     context.lineJoin=“miter”;   
  65.     context.miterLimit=“2”;   
  66.     context.lineWidth=“10”;   
  67.     context.strokeStyle=“#2913EC”;   
  68.     context.stroke();   
  69.   

The effects of different values of each attribute are as follows:

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.