Canvas attribute summary and application guide
1. Introduction
Canvas is an element provided by HTML5 for drawing graphics. It can be dynamically displayed in the browser. Draw graphics, create animations, and interact with other HTML elements. The Canvas element has many attributes. This article will summarize the commonly used Canvas attributes and give corresponding application guidelines and code examples.
2. Canvas attribute summary and application guide
- width and height
These two attributes specify the width and height of the Canvas element respectively, in pixels. By setting these two properties, you can control the size of the drawing area.
Sample code:
<canvas id="myCanvas" width="500" height="300"></canvas>
Copy after login
- getContext()
getContext() method returns an object for the drawing context through which drawing operations can be performed.
Sample code:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
Copy after login
- fillStyle and strokeStyle
fillStyle properties are used to set the fill color, and the strokeStyle property is used to set the border color.
Sample code:
ctx.fillStyle = "red";
ctx.strokeStyle = "blue";
Copy after login
- lineWidth
The lineWidth property is used to set the width of the line, in pixels.
Sample code:
ctx.lineWidth = 2;
Copy after login
- lineCap
The lineCap property is used to set the style of the end of the line. There are three values: butt (default value, straight end) , round (round end) and square (square end).
Sample code:
ctx.lineCap = "round";
Copy after login
- lineJoin
The lineJoin property is used to set the corner style when two lines intersect. There are three values: round (round corner ), bevel (beveled corner) and miter (sharp corner).
Sample code:
ctx.lineJoin = "bevel";
Copy after login
- globalAlpha
The globalAlpha property is used to set the transparency of drawing, with a value ranging from 0 to 1.
Sample code:
ctx.globalAlpha = 0.5;
Copy after login
- globalCompositeOperation
globalCompositeOperation property is used to set the drawing blending mode, which can control how newly drawn graphics overlap with existing graphics.
Sample code:
ctx.globalCompositeOperation = "source-over";
Copy after login
- font
The font property is used to set the font style when drawing text.
Sample code:
ctx.font = "20px Arial";
Copy after login
- textAlign and textBaseline
textAlign properties are used to set the alignment of text. There are three values: start (default value, text left alignment), end (text right-aligned) and center (text aligned center).
The textBaseline attribute is used to set the position of the text baseline. There are six values: top, hanging (hanging baseline), middle, alphabetic (default baseline), ideographic (ideographic baseline) and bottom.
Sample code:
ctx.textAlign = "center";
ctx.textBaseline = "middle";
Copy after login
- shadowBlur and shadowColor
The shadowBlur property is used to set the blur of the shadow, in pixels; the shadowColor property is used to set the color of the shadow .
Sample code:
ctx.shadowBlur = 10;
ctx.shadowColor = "black";
Copy after login
- createLinearGradient() and createRadialGradient()
createLinearGradient() method is used to create a gradient object with a linear gradient effect; createRadialGradient() method A gradient object used to create a radial gradient effect.
Sample code:
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;
Copy after login
- createPattern()
createPattern() method is used to create an infinite loop of tiled patterns such as images, videos, or text.
Sample code:
var img = new Image();
img.src = "pattern.png";
img.onload = function () {
var pattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = pattern;
};
Copy after login
- save() and restore()
save() methods are used to save the current state of the canvas, including all attributes and transformations ;The restore() method is used to restore the previous state of the canvas.
Sample code:
ctx.save();
// 进行一系列绘图操作
ctx.restore();
Copy after login
The above are commonly used Canvas properties and their application guidelines. By rationally using these properties, we can achieve various colorful graphics and animation effects. In actual development, it can be used flexibly according to specific needs to achieve the best results. Let us use our imagination to create our own wonderful pictures!
The above is the detailed content of Detailed introduction and usage guide of canvas attribute. For more information, please follow other related articles on the PHP Chinese website!