Canvas canvas
**The last one used a canvas to make a changing bubble. This one describes how the canvas works
1.The canvas element of HTML5 uses JavaScript to draw images on a Web page, and the canvas is a rectangular area that controls each pixel of the canvas.
2. Canvas default size is 300*150 Do not use css to set width and height, will scale equally.
<canvas id="myCanvas" width="200" height="100">Upgrade your browser (what the unrecognized browser sees)</canvas>
3. Before using canvas with JS, you need to set its drawing environment:
var cav=canvas.getContext('2d');4. Draw a square first
1.FilRect (L,T, W,H) fills a square, L,T for location, W,H for width and height.
2.strokeRect(L,T,W,H) draws a square (no fill, only outer lines) L,T for position, W,H for width and height.
PS: Canvas can be precise to every pixel
cav.strokeRect(50,120,100,100); outer line 2px thick
cav.strokeRect(200.5,120.5,100,100); outer edge is 1px thick
5. Styling
1.fliiStyle sets the fill color
2.ftrokeStyle Sets the color of the line
3.lineWidth sets the width (thickness) of the line
6. Set line connection point style
1.lineJoin value: miter/round/bevel
Default Right/Round/Bevel
7. Draw Path
1.beginPath starts drawing path markers
2.closePath ends drawing path markers, connecting start and end points
3. moveToMove to the new target point being drawn
4.lineTo New Target Point
5. Strke Drawing Line, Default Black
6.fill fill fill, default black
7.rect rectangular area
8.clearRect deletes a rectangular area
9.save Save Path
10.restore restores the last saved path
8. Next draw the circle
1.arc(x,y, radius, start radian, end radian, rotation direction)
The position of the center of the x,y circle
The relationship between radian and angle: radian = angle*Math.PI/180
Rotation direction: clockwise (default: false) counterclockwise (true);
9. Draw curves
1.arcTo(x1,y1,x2,y2,r)
The position of the starting point of x1,y1
Position of the end point of x2,y2
r Curve Radius
2. Quadratic CurveTo (x1, y1, x2, y2) Bezier Curve
Location of the first set of control points for x1,y1
Position of the end point of x2,y2
3.bezierCurveTo(x1,y1,x2,y2,x3,y3) Bezier Curve
Location of the first set of control points for x1,y1
Position of the second set of control points for x2,y2
X 3, y 3 end coordinates
10. Deformation
translate offset, moving the position of the current coordinate from the starting point as the datum
rotate rotation with radian parameters
scale scaling, (direction of x and y axes)
11. Insert pictures
1.Create Picture Instance var img=new Image();
2.Wait until the picture is loaded and execute canvas operation
3.Set Picture Path
4.adopt canvas Draw
eg: var img = new Image();
img.onload=function(){
draw(this);
};
img.src='../image/01.gif';
function draw(obj){
cav.drawImage(obj,200,200,100,100)
};
//Explanation of parameters: drawImage(obj,x,y,w,h), img object, x,y picture starting coordinate, w,h picture width and height
12. Insert Background
createPattren(img,Tiling method)
//Wait until the picture is loaded before proceeding
//Tiling method: repeat/repeat-x/repeat-y/no-repeat;
eg: var img = new Image();
img.onload=function(){
draw(this);
}
img.src='../image/01.gif';
function draw(obj){
var bg=cav.createPattern(obj,'repeat');
cav.fillStyle=bg;
cav.fillRect(0,0,500,500);
}
13. Gradient
1.linear-gradient
createLInearGradient(x1,y1,x2,y2)
//The coordinates of the starting point of the first set of parameters and the ending point of the second set of parameters
eg: var gradient=cav.createLinearGradient(100,100,300,300);
gradient.addColorStop(0,'red');
gradient.addColorStop(0.3,'blue');
gradient.addColorStop(0.7,'yellow');
gradient.addColorStop(1,'pink');
cav.fillStyle=gradient;
cav.fillRect(100,100,500,500);
2.Radial Gradient
createRadialGradient(x1,y1,r1,x2,y2,r2)
//Parameters: coordinates and radius of the first circle; coordinates and radius of the second circle
eg: var gradient=cav.createRadialGradient(300,300,50,300,300,300);
gradient.addColorStop(0,'red');
gradient.addColorStop(0.3,'blue');
gradient.addColorStop(0.7,'yellow');
gradient.addColorStop(1,'pink');
cav.fillStyle=gradient;
cav.fillRect(0,0,600,600);
14. Text
strokeText(txt,x,y) text border
fillText(txt,x,y) text fill
font text size "60px impact"
textBaseline Text Baseline, default below
Value: top/ middle/bottom
15. Shadows
shadowOffsetX Axis offset, x Axis offset
shadowOffsetY Axis offset, y Axis offset
shadowBlur Fuzzy Distance
sgadowColor Blur color
eg:
cav.shadowOffsetX=10;
cav.shadowOffsetY=10;
cav.shadowBlur=5;
cav.sgadowColor='red;
cav.fillRect(0,0,200,200);
16. The canvas is exported as a picture toDataURL();
var img=document.getElementById('img');
img.src=canvas.toDataURL();**There are so many uses of my summary in the canvas and what are the drawbacks? Give me a comment and I like to talk about learning.