Common attribute methods of html5 canvas (introduction)

This chapter brings you the common attribute methods (introduction) of html5 canvas. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

FirstIntroducing the5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b tagNeedless to say.

The second step is to get the 2d environment of canvas (var ctx = canvasDom.getContext('2d')).

Now, you may want to draw something. Before drawing something, you need to determine something, such as:

ctx.fillStyle: This is a property used to determine the fill color. (With fill, it’s all related to filling)
ctx.strokeStyle: This is a property used to determine the "pen path" (just like a line). (Both strokes are related to line drawing)
ctx.shadow: There are 4 properties for setting the shadow of the drawn graphics (shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY). I don’t use them often, so I’ll omit them.
ctx.lineWidth: This is the most commonly used of the four properties (lineCap, lineJoin, lineWidth, miterLimit) for setting line styles. It sets the line width and the value is a string with px.
ctx.font: This is to set the font size and font style of text(). The value can be "30px" or "30px Microsoft yahei". At the same time, cooperate with ctx.textAlign and ctx.baseline to set the alignment position and baseline position. Then draw text through ctx.filltext() or ctx.strokeText(), and ctx.measureText() returns an object containing text information, such as width and height.

After understanding the above basic attributes, you can draw something:

If you want to display something, the process is probably to first make the path (the path is invisible), and then Then use ctx.fill() or ctx.stroke to fill or trace the path.

You can use ctx.rect(x,y,width,height) or ctx.arc(x,y,radius,startAngle,endAngle,anticolorwise) to first create a path, and then fill or stroke.

Of course, the rectangle has ctx.fillRect() and ctx.strokeRect() to directly create a visible square. (Circle does not have these two methods)

Finally, I will introduce a blackboard eraser-ctx.clearRect(x,y,weight,height), which is used to clear all pixels in the box.

In order to prevent interference from previous paths, you can use ctx.beginPath() to clear the previous paths before each drawing.

The above is the basic use of canvas, let’s talk about some advanced (yong) (bu) points (shang).

Gradient filling of rectangular style:

var grd = ctx.createLinearGradient(x0,y0,x1,y1);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillstyle = grd;
ctx.fillRect(x,y,w,h);

This step is equivalent to predefining a gradient style (can be filled or drawn) and setting the style. Then fill or trace.

There is also createRadialGradient() and addColorStop to set the radial style.

Filling of media (pictures, videos, other canvases):　

var img = imgDom;
var pat = ctx.createPattern(img,"repeat");

Then this pat can be given to ctx. Style to fill or draw lines, etc.

There are four types of patterns: repeat (default), repeat-x, repeat-y, no-repeat.

Customized path:

Use ctx.moveTo(x,y); to move the starting point of the path to (x,y), and then cooperate with lineTo( x, y), you can get the path and display it by tracing it.

Of course, if you want to fill, but the path may not be closed, you can use ctx.closePath() to close the path and then fill.

Canvas cutting:

Use ctx.clip() to cut the canvas according to the currently closed path. The cut canvas part cannot be operated. .

You can save the current area through ctx.save(), and then restore it through ctx.restore().

Draw an arc:

Draw an arc through ctx.arcTo(x0,y0,x1,y1,radius); determine the arc through two points and the radius, to get the path, and then fill or trace it as needed.

Determine whether the point is within the path:

ctx.isPointInPath(); returns a Boolean value, nothing to say.

There is a kind of curve called Bezier:

First use ctx.moveTo() to move to the starting point.

ctx.quadraticCurveTo(c1x,c1y,edx,edy); Bezier curve using the starting point and a control point plus the end point;

ctx.beizierCurveTo(c1x,c1y,c2x,c2y ,edx,edy); Bezier curve drawn using two control points.

Graphic conversion:

ctx.scale(w,h); Zooming in w>1 means zooming in width, h means height.

　ctx.rotate(r); r is the radian unit, such as 20 degrees: 20*Math.PI/180. clockwise.

　ctx.translate(x,y) sets the position of (0,0) on the canvas, and (x,y) is the current position of (0,0).

　ctx.transform(a,b,c,d,e,f); are horizontal scaling, horizontal tilt, vertical tilt, vertical scaling, horizontal displacement, and vertical displacement respectively. This property will be superimposed and will be effective for the next graphic.

　ctx.setTransform(a,b,c,d,e,f); Same as above, this property will redefine a transform and be valid for the next graphic.

drawImage():

ctx.drawImage(dom,arg1,arg2,arg3,arg4,arg5,arg6,arg7,arg8); In addition to dom, at most 8 parameters can be passed, 2 are for positioning the image (original size), 4 are for positioning the image according to size, and 8 are for positioning the image after cutting (respectively: cutting start x, y, cutting size w , h, positioning position x, y, size w, h).

GlobalAipha attribute: Set global transparency. (Already painted ones will not be affected).

The globalCompositeOperation attribute sets the stacking order of the previous and next overlapping areas, including "source-over" and "destination-over", which one is over and which one is below.

The above is the detailed content of Common attribute methods of html5 canvas (introduction). For more information, please follow other related articles on the PHP Chinese website!