HTML5 Canvas text filling, line segment attributes, cropping, transparency and pixel merging methods

Many properties in CSS3 can be compared to some properties of our canvas
Many properties of the "brush" environment object in canvas can be compared to properties in CSS3
We are not only You can only draw graphics, and you can also add text to the canvas

Text filling

Similarly obtain the element object and environment object first

<canvas id="myCanvas" width=500 height=500></canvas>

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

font is used to set the font attribute
fillText sets the entity text and position
strokeText sets the hollow text and position

ctx.fillStyle = 'red';
ctx.font = '50px sans-serif';
ctx.fillText('hello world!', 100, 100);

font can refer to the font attribute of css
Default value '10px sans-serif'

---

There is also a method to measure text width, just know it
measureText()

console.log(ctx.measureText('hello world!').width);

Line segment attribute

Line segment coverage

lineCap( ) is used to set the line segment coverage attribute
There are three values, butt/square/round

ctx.lineCap = 'butt'; //默认ctx.lineWidth = 50;
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'square';
ctx.lineWidth = 50;
ctx.moveTo(100, 200);
ctx.lineTo(400, 200);
ctx.stroke();

ctx.beginPath();
ctx.lineCap = 'round';
ctx.lineWidth = 50;
ctx.moveTo(100, 300);   
ctx.lineTo(400, 300);
ctx.stroke();

The gray lines in the picture were added by me
so that you can see the three worthy differences

Line segment joining

lineJoin() defines the behavior of line segment joining
There are also three values, miter/round/bevel

ctx.lineWidth = 40;
ctx.lineJoin = 'miter'; //默认ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

ctx.lineWidth = 40;
ctx.lineJoin = 'round'; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

ctx.lineWidth = 40;
ctx.lineJoin = 'bevel'; //改ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.lineTo(100, 400);
ctx.closePath();
ctx.stroke();

---

When we use the default miter
When two When the angle of the line segment is very small
the "point" will become larger and larger

When it reaches a certain degree of "point", the default value will become bever

We can set up to break through this limit, use miterLimit
In this way, changing the length of the default value will be set to limit*lineWidth/2
Just understand it

ctx.miterLimit = 30;

Clip

The clip attribute indicates that the area outside the current path will no longer be drawn
It is equivalent to cutting the current area from the canvas

ctx.arc(250, 250, 100, 0, Math.PI*2, 0);ctx.clip();ctx.fillRect(0, 0, 500, 500);

Here I cut the canvas into a circle
So that when filling the rectangle, it can only be filled into this "circular canvas"

Transparency

Use globalAlpha You can set global transparency
This is very simple and I won’t explain it much

ctx.globalAlpha = 0.4;ctx.fillRect(100, 100, 300, 300);

Pixel Merge

globalCompositeOperation is used to set
New graphics pixels and The merging method of old graphics pixels
It has 11 values
There are 3 common ones, source-over (default)/destination-over/copy
souce-over is to overwrite the graphics drawn first to the graphics drawn later The above
destination-over is to draw the graphics first and then the top of the graphics
copy is to display only the graphics drawn later (the graphics drawn first disappear)
Other values ​​are theoretically like this (different browser implementation levels Or in different ways)

ctx.fillStyle = 'blue';
ctx.fillRect(100, 100, 200, 200);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'red';
ctx.arc(300, 300, 100, 0 ,Math.PI*2, 0);
ctx.fill();

Below I give the 11 values ​​​​that I tested on the latest version of chrome for your reference

source-over:

destination-over:

copy:

##lighter:

xor：

source-atop：

destination-atop：

source-in:

destination-in:

source-out：

destination-out：

## The above is the HTML5 Canvas text Regarding filling, line segment attributes, cropping, transparency and pixel merging methods, please pay attention to the PHP Chinese website (www.php.cn) for more related content!