HTML5 is now one of the more fire nowadays programming language, but to learn how many of my friends are unaware of, do not know where to start, for the above small circle web front end apes lecturer will share a web front-end knowledge every day, hope your front-end learning some help today share that canvas to draw the line method.
Learning canvas, first of all you have to know how to draw the line, and then to go to achieve more complex graphics through a number of simple line segments, such as common charts, bar charts, line charts, etc. are achieved by a section of the line segment.
Basics
The basics of the canvas is not that much, mainly to learn how to draw the line, graphics, pictures, text, and so on. canvas can be drawn in a browser, you can make use of node-canvas in the server node to draw a simple picture. This article only recording the drawing in the browser, as to how to draw in the end node, you can go to view the data.
Rendering in a browser, to define the canvas element in html, the default width and height is 300 * 150, you can be set by width and height. Note canvas element style canvas drawing canvas width and height and width and height is not a thing, this will later say.
<canvasid="canvas">
<P> The current browser does not support canvas, please upgrade your browser </ p>
</canvas>
Before drawing, we must first get the current canvas drawing context of the 2d context, follow-up is always drawn by operating context.
letcanvas=document.querySelector('#canvas');
if(!canvas){
thrownewError('cannotfindcanvaselement');
}
// Note 2d parameters must be lowercase;
// By setting parameter webgl, 3d drawing context can be acquired
letctx=canvas.getContext('2d');
Note: The subsequent examples will ignore the code fragment above, directly using ctx variable represents the canvas 2d drawing context.
Segments
When drawing a simple line segment, the segment will normally set the style, such as color, line width, line cap style, and we set the global style ctx draw by setting strokeStyle, it can be a legitimate rgba or hex color value, or gradient objects. The following code draws a simple from (10,10) to (50,60), and a width of 10, the red line.
ctx.strokeStyle='red';
ctx.lineWidth=10;
ctx.moveTo(10,10);
ctx.lineTo(50,60);
ctx.stroke();
Drawing lines related methods and attributes:
Related attributes:
lineCap, the value tells the browser how to draw the endpoint of a line segment, one of the following three optional values: butt, round, square. The default is butt.
lineWidth, the pixel value determines the width of the line segment. Must be non-negative, non-infinity, the default is 1.0.
lineJoin, decide how to draw the focus of the two segments intersect only when the two segments orientations are to take effect. Possible values: bevel, round, miter. The default value is miter.
miterLimit, tell the browser how to draw the line focus miter form only when lineJoin = 'miter' effective default is 10.0.
lineDashOffset, disposed offset dotted line, the default is 0.0.
Related methods:
beginPath, all the sub-paths among the current path must be cleared in order to reset the current path. Generally when drawing closed figure first call.
closePath, certain closed path shown. The method for closing a circular path and an open path by curve segment or created.
moveTo, the current drawing point moves to the specified coordinates.
lineTo, a plotted point from a coordinate point designated line segment.
setLineDash, the method for setting the broken line, the parameter is an array, indicating the length of the solid line drawing and the length of the gap between the solid line.
Try using a different set of values drawn lineCap same segment
ctx.lineWidth=10;
ctx.textAlign='center';
letcolors=['red','green','blue'];
letlineCaps=['butt','round','square'];
for(let[index,lc]oflineCaps.entries()){
ctx.strokeStyle = colors [index]; // set the color of the line segment
ctx.lineCap = lc; // set lineCap
ctx.beginPath (); // Clear the current path
ctx.moveTo(10,20+20*index);
ctx.lineTo(50,20+20*index);
ctx.stroke();
ctx.fillText(lc,80,25+20*index);
}
Try again with a different drawing styles lineJoin values at the two focal segments
ctx.lineWidth=20;
ctx.textAlign='center';
ctx.lineCap='butt';
letcolors=['red','green','blue'];
letlineJoins=['bevel','round','miter'];
for(let[index,lj]oflineJoins.entries()){
ctx.strokeStyle = colors [index]; // set the color of the line segment
ctx.lineJoin=lj;//设置lineJoin
ctx.beginPath (); // Clear the current path
ctx.moveTo(10+80*index,20);
ctx.lineTo(50+80*index,20);
ctx.lineTo(50+80*index,60);
ctx.stroke();
ctx.fillText(lj,40+80*index,80);
}
canvas can only draw a solid line, a broken line may be drawn. Drawing a broken line, by setting properties and call lineDashOffset setLineDash () mode.
ctx.lineWidth=10;
ctx.textAlign='center';
ctx.setLineDash ([8,8]); // solid line portion represents 8 pixels, 8 pixels gap portion
letcolors=['red','green','blue'];
letlineDashOffsets=[1,2,4];
for(let[index,ldOffset]oflineDashOffsets.entries()){
ctx.strokeStyle = colors [index]; // color segments
ctx.lineDashOffset = ldOffset; // set the offset
ctx.beginPath ();
ctx.moveTo(10,20+20*index);
ctx.lineTo(100,20+20*index);
ctx.stroke();
ctx.fillText(`lineDashOffset:${ldOffset}`,160,25+20*index);
}
Through the above we can know lineDashOffset offset start drawing a dotted line is set. setLineDash () method, accepts a parameter array, the array if the number is odd, it defaults to the current copy of the array elements, to make it an even number. From the 0-th element, represents the solid line portion length, a first element, showing a gap portion of the length, the second element represents the solid line length, the third element, showing a gap portion of the length, if the array last element of , will start from scratch, and so on.
ctx.lineWidth=10;
ctx.textAlign='center';
letcolors=['red','green','blue','gray'];
letlineDashes=[[20,20],[40,40],[20,40],[20,40,20]];
for(let[index,ld]oflineDashes.entries()){
ctx.strokeStyle = colors [index]; // set the color
ctx.setLineDash (ld); // set lineDash
ctx.beginPath ();
ctx.moveTo(10,20+20*index);
ctx.lineTo(171,20+20*index);
ctx.stroke();
ctx.fillText(`lineDashes:[${ld}]`,240,25+20*index);
}
letlineDashOffset = 0; // initial lineDashOffset
ctx.strokeStyle='green';
functionanimate () {
if(lineDashOffset>25){
lineDashOffset=0;
}
ctx.clearRect (0,0, width, height); // clear the current canvas
ctx.lineDashOffset = -lineDashOffset; // set lineDashOffset
ctx.setLineDash ([4,4]); // Set the solid line length and space length
ctx.rect (20,20,100,100); // draw a rectangle
ctx.stroke (); // current path of the canvas stroke
lineDashOffset + = 1; // lineDashOffset offset plus 1
window.requestAnimationFrame (animate); // to animate function is repeatedly executed with a browser frame rate
}
animate();
Small circle web front end apes lecturer said: teach him to fish more teach him to fish, you want to know more about the junior partner web front-end development of dynamic small apes can focus ring every day, will occasionally update Internet programming knowledge, hope there will certainly help you learn.
Reproduced in: https: //www.jianshu.com/p/e0a6329af879