Powerful <canvas> and powerful <canvas>
<Canvas>
I will tell you that I not only wrote this blog, but also recorded videos? Here is the video address. Will I tell you whether the best QQ Group for front-end advanced courses is 130977811? Videos are shared online every week in the group.
I personally think that <canvas> is the most important new label of h5. Now all h5 games are based on <canvas>. It provides a powerful canvas for the game, you can draw a wealth of content on the canvas, and also generate many game engines. Now, we will briefly introduce some basic drawing and image processing functions of <canvas>:
1. draw linesThe basic steps for drawing are: First Use getContext ("2d") to obtain the two-dimensional drawing environment context. If there are two-dimensional drawing environments, there must be three? Yes, 3D is about to use WebGL, and the technical level is limited. Today we will not discuss 3D (so familiar with Sanwei swelling ~~!). Then, set the paint brush style, lineWidth, strokeStyle, and lineCap. After the style is set, the drawing starts. First, use moveTo () to move an invisible cursor to the starting position, then set the focus of lineTo (), and finally draw a line from stroke.
<! Doctype html> 2. Draw a rectangleThe steps for drawing a rectangle are described above, but there are two types of drawing: solid rectangle fillRect (starting point x, starting point y, length, width), hollow rectangle strokeRect (starting point x, starting point y, long, wide ).
Var canv = document. getElementById ("canv"); // obtain the 2d context var ctx = canv. getContext ("2d"); // sets the style ctx. lineWidth = 10; ctx. strokeStyle = "red"; // draw a solid rectangle ctx. fillStyle = "red"; ctx. fillRect (100,100 );3. Draw a circleLikewise, it is divided into solid and hollow parts, mainly using arc (center x, center y, radius, actually angle, end angle * Math. PI/180, clockwise );
Var canv = document. getElementById ("canv"); // obtain the 2d context var ctx = canv. getContext ("2d"); // sets the style ctx. lineWidth = 10; ctx. strokeStyle = "red";/* ctx. beginPath (); // center point, radius, start and end angle, clockwise ctx. arc (200,200, 50, 0, 270 * Math. PI/180, false); ctx. stroke (); * // solid ctx. fillStyle = "red"; ctx. beginPath (); ctx. arc (200,200, 50, 0, 270 * Math. PI/180, false); ctx. fill ();4. EraseYou can use clearRect (start point x, start point y, erase range long, and erase range width) to erase data.
// Set the style ctx. lineWidth = 10; ctx. fillStyle = "red"; // draw a rectangle ctx. fillRect (10, 10, 200,100); // erase ctx. clearRect (30,30, 100,50 );5. GradientTwo gradient modes are available: linear gradient createLinearGradient () and radial gradient createRadialGradient ().
Var canv = document. getElementById ("canv"); // obtain the 2d context var ctx = canv. getContext ("2d"); // radial gradient var grd = ctx. createRadialGradient (100,100, 10,100,100, 50); grd. addColorStop (0.1, "red"); grd. addColorStop (0.8, "blue"); ctx. fillStyle = grd; ctx. fillRect (200,200,); // linear gradient var grd = ctx. createLinearGradient (, 0); grd. addColorStop (0.2, "red"); // must be a number between 0 and 1, representing the gradient weight grd of the color. addColorStop (0.7, "blue"); ctx. fillStyle = grd; ctx. fillRect (0,0, 200,200 );*/6. pixel processing: black/white processing and reverse Color ProcessingPrinciple: Read the image to be processed to the canvas, traverse each pixel, and change the rgb value of the pixel.
Black/white processing:
Reversed color processing:
<Body> 7. Small animationsAnimation principle: first draw an image drawImage (img, x, y, 80, 80); change the coordinates x and y of the image at any time to keep the image moving.
<! Doctype html>What if we don't clear the results of the last draw? Comment out cxt. clearRect (500,500,); try it.
Function draw () {// clear the previous animation // comment out the cxt. clearRect (500,500,); // very important x + = 5; y + = 5; cxt. drawImage (img, x, y, 80, 80 );}The effect will appear in a row of images:
8. Drag principle + canvas Implementation of simple canvas <! Doctype html> Effect:The content is very basic. You can see it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
