The last time we studied the canvas with adjustment for color and transparent, and today we learn about the knowledge of linear, gradient, pattern and shadow.
The first is linear in the canvas object, we can use a set of properties to control the line style.
lineWidth = value
lineCap = type
lineJoin = type
miterLimit = value
I think that using examples to explain much better than a simple introduction, this is my usual style. Let's start on the code:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i = 0; i < 10; i++){
ctx.lineWidth = 1+i;
ctx.beginPath ();
ctx.moveTo(5+i*14,5);
ctx.lineTo(5+i*14,140);
ctx.stroke();
}
}
This example draws ten lines of varying thickness, then let us familiarize ourselves with this property: lineWidth.
lineWidth set the current draw line thickness, property value must be a positive number, the default is 1.0.
It refers to the line width of the path to the center of the given thickness on both sides. In other words, the path on both sides of each half of the width of the drawing. Because the canvas coordinates and the pixel does not correspond directly, when it is desired to obtain accurate horizontal or vertical line when the pay special attention.
Examples of the leftmost and the width of all odd lines do not exhibit this problem because the positioning path.
Want to achieve precise lines, the lines must be how to draw out an understanding. Shown below, is represented by a grid canvas coordinate grid, each cell corresponds to a pixel on the screen. In the first drawing, the filling (2,1) to the rectangle (5, 5), the entire region of the boundary pixel just fall on the edge of the rectangle thus obtained can have a sharp edge. Forgive my picture taken from the website of teaching, and I do not want to, and if I killed you can not learn draw up. . .
If you want to draw a line from (3,1) to (3,5), the width is 1.0 lines, you'll get the same figures as the second result. The actual filled (dark blue) only extends to both sides of the path of half of the pixels. This half of a pixel will be rendered in a similar manner, which means that those pixels only partially shaded, the result is the actual stroke color color to fill the entire halftone area (light blue and dark blue portion). This is why the example line width of 1.0 causes inaccurate.
To solve this problem, you have to be very precise control over the path. Knowing that a 1.0 width line will extend at both sides of the path of the half pixel, as draw lines from (3.5, 1) to (3.5, 5) in the third image - which just fall edge pixel boundary, filling a single accurate a width of 1.0 lines.
For those even-width lines, the number of pixels on each side are integers, then you want a path that is between pixels (such as that from (3,1) to (3,5)) rather than in pixels intermediate point. Also, it is noted that an example of vertical lines, which gridline Y coordinates, if not, there will be the same half-pixel rendering endpoint.
While a little pain will begin processing scalable 2D graphics, but early attention to the relationship between the pixel grid and path location, you can ensure that the graphics scaled or any other deformation can remain looks just fine: width 1.0 perpendicular to the enlarged 2 times, will become clear width of 2.0, and appears at the position that it should appear on.
Well, we figure out the problem of coloring the line, continue to learn the next attribute: lineCap.
Property lineCap means determines the look of the display segment endpoint. It may be one of the following three: butt, round and square. The default is the butt.
No examples, no learning. Come, let us on the code:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var lineCap = ['butt','round','square'];
// Draw guides
ctx.strokeStyle = '#09f';
ctx.beginPath ();
ctx.moveTo(10,10);
ctx.lineTo(140,10);
ctx.moveTo(10,140);
ctx.lineTo(140,140);
ctx.stroke();
// Draw lines
ctx.strokeStyle = 'black';
for (var i=0;i<lineCap.length;i++){
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath ();
ctx.moveTo(25+i*50,10);
ctx.lineTo(25+i*50,140);
ctx.stroke();
}
}
, We analyze the code. The first half of the draw two auxiliary lines, to let everyone see the difference between this attribute assigned different values. Then the second half of a loop to loop through all the parameters of items lineCap and 11 assignments. Three lines of the starting point and focus fall into the auxiliary line.
Line on the left with the default butt. It may be noted that it is flush with the guides. Round the middle of the end that has a radius half the line width plus the semicircle. The right is the square of the end that the added height of equal width and half the width of the box.
For now we have almost a straight line, but a new problem came out again. How we have to draw the line connecting the two places it? Rounded arc or right angle? Or something else? Stroke is filled with the path to the method? of course not. Let's learn this new property: lineJoin
First piece of code to it, a lot of code is the basis of knowledge of the thing:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var lineJoin = ['round','bevel','miter'];
ctx.lineWidth = 10;
for (var i=0;i<lineJoin.length;i++){
ctx.lineJoin = lineJoin[i];
ctx.beginPath ();
ctx.moveTo(-5,5+i*40);
ctx.lineTo(35,45+i*40);
ctx.lineTo(75,5+i*40);
ctx.lineTo(115,45+i*40);
ctx.lineTo(155,5+i*40);
ctx.stroke();
}
}
LineJoin property value determines the appearance of the graph displayed at the line connecting the two. It may be that one of the three: round, bevel and miter. The default is miter.
In this example, we define three connections are provided lineJoin different values. The first effect is round, the corners are rounded arc ground. The second effect is the bevel angle becomes flat. The third is the effect of the miter, extending until line segments intersect at one point, extends property miterLimit restricted effect will now be described.
miterLimit is doing it? Milter effect just like a saw, a line segment extending outwardly converge. Critical angle between the line and maybe, if the angle is large, good, not far out of the two of you can encounter. But if the angle is relatively small, then it slightly trouble, extended the length of the commitment will rise exponentially. . .
miterLimit attribute is used to set the maximum distance of the intersection point of attachment to the extension, if the intersection point distance is greater than this value, the effect may become connected to bevel.
The old rules to bar code:
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// Clear canvas
ctx.clearRect(0,0,150,150);
// Draw guides
ctx.strokeStyle = '#09f';
ctx.lineWidth = 2;
ctx.strokeRect(-5,50,160,50);
// Set line styles
ctx.strokeStyle = '#000';
ctx.lineWidth = 10;
//Set miterLimit value
ctx.miterLimit = 10；
// Draw lines
ctx.beginPath ();
ctx.moveTo(0,100);
for (i=0;i<24;i++){
was dy = i% 2 == 0? 25 -25;
ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
}
ctx.stroke();
return false;
}
This example I made a point of small changes, the original case is input by the input label miterLimit property, I am here in order to facilitate learning, write directly to death, hope understanding.
We can change this value, look at their own change, I believe there will be a direct understanding of the properties of this simple.
Today we will study it first here, next time we will be gradual learning, we see you next time ~
Reproduced in: https: //www.cnblogs.com/xiao-yao/archive/2012/04/13/2445965.html