HTML5 Canvas knowledge point learning notes

Canvas

① Main function: Draw a vector chart② Vector image (PATH)-(ILL) bitmap image (pixel)-All images in PS are bitmap ③ Canvas can be used for animation, however, games can also be created not for the purpose of making animations. It is mainly generated for plotting. ④ It is recommended that you set the width and height of the style to be written in the style. Canvas is equivalent to a container for drawing graphics, and there is no painting function. You need to use JS (SCRIPT) to implement the painting function.

Ideas:

GetContext () var context = cnvas. getContext ('2d '); // draw an image // Start beginPath () Start path // Start point // Process path // End point // Write down // End closePath () end path

Method:

BeginPath () Start pathMoveTo (x, y) Move the path to the canvas and the specified point does not create a pathLineTo (x, y) adds a new vertexClosePath () end pathFillStyle is used to set the fill colorStroke draws a good path for offline lingerieFill () fills in the defined path

Context.LineWidth=5;The main writing sequence is color first and then filled

<Script> Var cnvas = document. getElementById ('cnvas '); Var context = cnvas. getContext ('2d '); Context. moveTo (200,100 ); Context. lineTo (600,100 ); Context. lineTo (600,300 ); Context. lineTo (200,300 ); Context. lineTo (200,100 ); Context. closePath (); Context. fillStyle = 'red '; Context. stroke (); // stroke Context. fill (); // fill color </Script>

Draw a rectangle: Rect(X, y, w, h): x y is the starting coordinate w. h is the width and height of the rectangle. FillRect <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Export + bH + lhwo7jwz8pm1ru75tbgo6yyu8zus + SjrGZpbGxSZWN0o6ijqczus + export = "1" cellpadding = "2" cellspacing = "0" width = "600">Var cnvas = document. getElementById ('cnvas ');
Var context = cnvas. getContext ('2d ');
For (var I = 0; I <5; I ++ ){
Context. beginPath ();
Context. strokeStyle = 'red ';
// Context. arc (10 * Math. pow (2, I), 100,10 * Math. pow (2, I), 0, Math. PI * 2, true );
Context. arc (10 * I, 100,10 * I, 0, Math. PI * 2, true );
Context. stroke ();
Context. closePath ();
};
For (var I = 0; I <5; I ++ ){
Context. beginPath ();
Context. strokeStyle = 'yellow ';
Context. arc (10 * Math. pow (2, I), * Math. pow (2, I), 0, Math. PI * 2, true );
// Context. arc (10 * I, 100,10 * I, 0, Math. PI * 2, true );
Context. stroke ();
Context. closePath ();
};
If no value is added

Context. LineCap= "Round"; line cap

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.lineCap="round";ctx.moveTo(20,20);ctx.lineTo(20,200);ctx.stroke()

Other parameters: context. lineCap =" Butt| Round| Square";
Besell CurveQuadraticCurveTo (kx, ky, ex, ey) Secondary besell curve, one control point, one end point BezierCurveTo (kx1, ky1, kx2, ky2, ex, ey)Three times of the besell curve, two control points with one endpoint context. clearRect (x, y, w, h); clear the canvas

Generate a random besell Curve <Script> Var cnvas = document. getElementById ("cnvas '); Var context = cnvas. getContext ('2d '); Context. fillStyle = 'rgba (0, 0, 1 )'; Context. fillRect (0, 0, 800,400 ); // Three control points each point requires two values. These two points are random. // Each line requires three random colors (rgba ). // SetInterval (fun, 1000 ); // BezierCurveTo // Math. round () Math. random () // SetInterval (draw, 1000 ); Function draw (){ Var kx1 = Math. round (Math. random () * 700 ); Var ky1 = Math. round (Math. random () * 350 ); Var kx2 = Math. round (Math. random () * 750 ); Var ky2 = Math. round (Math. random () * 400 ); Var ex = Math. round (Math. random () * 750 ); Var ey = Math. round (Math. random () * 400 ); Var colorR = Math. round (Math. random () * 255 ); Var colorG = Math. round (Math. random () * 255 ); Var colorB = Math. round (Math. random () * 255 ); Context. shadowOffsetX = 4; // shadow Y axis offset Context. shadowOffsetY = 5; // Shadow X axis offset Context. shadowBlur = 6; // blur the size Context. shadowColor = "rgba (" + colorG + "," + colorB + "," + colorR + ", 0.4)"; // color Context. fillStyle = 'rgba (0, 0, 1 )'; Context. fillRect (0, 0, 800,400 ); Context. beginPath (); Context. fillStyle = 'rgba (0.1, 0 )'; Context. fillRect (0, 0, 800,400 ); Context. bezierCurveTo (kx1, ky1, kx2, ky2, ex, ey ); Context. lineWidth = 4; Context. strokeStyle = "rgb (" + colorR + "," + colorG + "," + colorB + ")"; Context. stroke (); Context. closePath (); } </Script>

Draw text:

FillText(Text, x, y, maxWidth): text indicates the text, x, y is the coordinate, maxWidth is optional, is the maximum width of the text, to prevent text overflow,FillText StrokeText(Text, x, y, maxWidth): text indicates the text, x, y is the coordinate, maxWidth is optional, is the maximum width of the text, to prevent text overflow,DrawText

Save () restore ()① It is essential to draw a complex image. They are used to save and restore the canvas State. There is no parameter ② sava is used to save the canvas state. After saving, you can call canvas's translation, scaling, rotation, cropping, and other operations ③ restore is used to restore the save status before the canvas, to prevent the save operation from affecting subsequent painting ④ use of sava and restore pairs, the number of restores is less than or equal to save

Shadow property:

ShadowColor: Set the shadow color. ShadowBlur: sets the shadowBlur level. ShadowOffsetX: Specifies the distance between the shadow and the image on the X axis. ShadowOffsetY: Set the distance between the shadow and the image on the Y axis.

Canvas: draw an image video drawImage (img, x, y, width, height) or drawImage (img, x, y)

[1] HTML structure: Img"> JS Structure Context. beginPath (); Context. drawImage (Img, 60, 60, 50, 50 );//DrawImage (img, x, y, width, height) Context. closePath (); [2] <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image(); img.src="flower.png"; cxt.drawImage(img,0,0);</script>

Image tile

Context. createPattern (Image, "Repeat | repeat-x | repeat-y | no-repeat "); Img: Image Type: Repeat: tiled entire canvas Repeat-x tiled on the x axis Repeat-y tiled in the y axis No-repeat is not tiled ------------------------------- var imageObj = new Image (); ImageObj. src = "http://www.bkjia.com/uploads/allimg/140617/0132043429-6.png "; Var pattern = context.CreatePattern(ImageObj, "repeat "); Context. rect (10, 10, cavas. width-20, cavas. height-20 ); Context.FillStyle= Pattern; Context.Fill ();

The drawImage () method draws an image, canvas, or video on the canvas. The drawImage () method can also plot certain parts of an image and/or increase or decrease the image size. JavaScript Syntax 1 Position the image on the canvas: context.drawImage(img,x,y); JavaScript syntax 2 Position the image on the canvas and specify the width and height of the image: context.drawImage(img,x,y,width,height); JavaScript syntax 3 Cut ImageAnd locate the cut part on the canvas: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Canvas video

<Script> Var v = document. getElementById ("video1 "); Var c = document. getElementById ("myCanvas "); Ctx = c. getContext ('2d '); V. addEventListener ('play', function () {var I = window. setInterval (function (){Ctx. drawImage (v, 270,135,)}, 20 );}, False ); V. addEventListener ('pause', function () {window. clearInterval (I) ;}, false ); V. addEventListener ('enabled', function () {clearInterval (I) ;}, false ); </Script>

Cavans gradient

<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50);</script>