HTML5 canvas basic drawing drawing lines

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b is a new tag in HTML5, used for drawing graphics. This article mainly introduces in detail the method of drawing lines in basic drawing of HTML5 canvas. Interested friends can For reference,

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b is a new tag in HTML5, used to draw graphics. In fact, this tag is the same as other tags, and its special features This tag can obtain a CanvasRenderingContext2D object, and we can control the object for drawing through JavaScript scripts.

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b is just a container for drawing graphics. In addition to attributes such as id, class, and style, it also has height and width attributes. There are three main steps for drawing on the 5ba626b379994d53f7acf72a64f9b697> element:

1. Get the DOM object corresponding to the 5ba626b379994d53f7acf72a64f9b697 element, which is a Canvas object;
2. Call the getContext( of the Canvas object ) method to get a CanvasRenderingContext2D object;
3. Call the CanvasRenderingContext2D object for drawing.

Line attributes

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

•lineCap The property sets or returns the style of the line cap at the end of the line. It can take the following values:
"butt" 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.

•lineJoin The property sets or returns the type of corner created when two lines intersect. It can take the following values:
"miter" Creates sharp corners (default);
"bevel" creates beveled corners;
"round" creates rounded corners.

•miterLimit property sets or returns the maximum miter length (default is 10). Miter length refers to the distance between the inside and outside corners where two lines meet. miterLimit is only valid when the lineJoin attribute is "miter".

JavaScript CodeCopy content to the clipboard

var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    //测试lineCap属性 
    //设置基准线便于观察 
    context.moveTo(10,10);   
    context.lineTo(10,200);   
    context.moveTo(200,10);   
    context.lineTo(200,200);   
    context.lineWidth="1";   
    context.stroke();   
    //butt 
    context.beginPath();   
    context.moveTo(10,50);   
    context.lineTo(200,50);   
    context.lineCap="butt";   
    context.lineWidth="10";   
    context.stroke();   
    //round 
    context.beginPath();   
    context.moveTo(10,100);   
    context.lineTo(200,100);   
    context.lineCap="round";   
    context.lineWidth="10";   
    context.stroke();   
    //square 
    context.beginPath();   
    context.moveTo(10,150);   
    context.lineTo(200,150);   
    context.lineCap="square";   
    context.lineWidth="10";   
    context.stroke();   
    //测试linJoin属性 
    //miter 
    context.beginPath();   
    context.moveTo(300,50);   
    context.lineTo(450,100);   
    context.lineTo(300,150);   
    context.lineJoin="miter";   
    context.lineWidth="10";   
    context.stroke();   
    //round 
    context.beginPath();   
    context.moveTo(400,50);   
    context.lineTo(550,100);   
    context.lineTo(400,150);   
    context.lineJoin="round";   
    context.lineWidth="10";   
    context.stroke();   
    //square 
    context.beginPath();   
    context.moveTo(500,50);   
    context.lineTo(650,100);   
    context.lineTo(500,150);   
    context.lineJoin="bevel";   
    context.lineWidth="10";   
    context.stroke();   
    //测试miterLimit属性 
    context.beginPath();   
    context.moveTo(700,50);   
    context.lineTo(850,100);   
    context.lineTo(700,150);   
    context.lineJoin="miter";   
    context.miterLimit="2";   
    context.lineWidth="10";   
    context.strokeStyle="#2913EC";   
    context.stroke();

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

Related recommendations:

Use HTML5 Canvas to fill images with color and texture

javascript html5 canvas implements a draggable province map of China

The above is the detailed content of HTML5 canvas basic drawing drawing lines. For more information, please follow other related articles on the PHP Chinese website!