Shulou(Shulou.com)06/03 Report--

How to use Canvas in HTML5 to draw the five-star red flag, I believe many inexperienced people are at a loss about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

The Canvas drawing API is not defined on the element itself, but on a "drawing environment" object obtained through the canvas's getContext () method.

Canvas API also uses the path representation. However, the path is defined by a series of method calls, rather than strings described as letters and numbers, such as calling the beginPath () and arc () methods.

Once a path is defined, other methods, such as fill (), operate on that path. Various properties of the drawing environment, such as fillStyle, illustrate how these operations can be used.

Use Canvas to draw the Chinese flag, code:

XML/HTML Code copies content to the clipboard

Chinese standard national flag / / use HTML5 to draw the standard five-star red flag var canvas = document.getElementById ("canvas"); var context = canvas.getContext ('2d'); var width = canvas.width; var height = width * 2 / 3; var w = width / 30 / / the width of the small grid context.fillStyle = "red"; context.fillRect (0,0, width, height); var maxR = 0.15, minR = 0.05 var minX / var maxX = 0.25, maxY = 0.25 var minX = 0.50,0.60,0.60,0.50] Var minY = [0.10,0.20,0.35,0.45]; / draw big ☆ var ox = height * maxX, oy = height * maxY; create5star (context, ox, oy, height * maxR, "# ff0", 0); / / draw pentagram / / draw small ★ for (var idx = 0; idx < 4) Idx++) {var sx = minX [idx] * height, sy = minY [idx] * height; var theta = Math.atan ((oy-sy) / (ox-sx)); create5star (context, sx, sy, height * minR, "# ff0",-Math.PI / 2 + theta) } / / Auxiliary line context.moveTo (0, height / 2) context.lineTo (width, height / 2); context.stroke (); context.moveTo (width / 2,0); context.lineTo (width / 2, height); context.stroke () / / draw grid, vertical bar for (var j = 0; j < 15; jaun +) {context.moveTo (j * w, 0); context.lineTo (j * w, height / 2); context.stroke () } / / draw grid, horizontal line for (var j = 0; j < 10; jaun +) {context.moveTo (0, j * w); context.lineTo (width / 2, j * w); context.stroke () } / / draw a large circle context.beginPath (); context.arc (ox, oy, maxR * height, 0, Math.PI * 2, false); context.closePath (); context.stroke (); / / draw a small circle for (var idx = 0; idx < 4 Idx++) {context.beginPath (); var sx = minX [idx] * height, sy = minY [idx] * height; context.arc (sx, sy, height * minR, 0, Math.PI * 2, false); context.closePath (); context.stroke () } / / for (var idx = 0; idx < 4; idx++) {context.moveTo (ox, oy); var sx = minX [idx] * height, sy = minY [idx] * height; context.lineTo (sx, sy) Context.stroke ();} / / draw a pentagram / * * create a pentagram shape. The central coordinate of the pentagram is (sx,sy), and when the distance from the center to the vertex is radius,rotate=0, a vertex is on the axis of symmetry * rotate: rotate the rotate Radian about the symmetric axis * / function create5star (context, sx,sy, radius, color, rotato) {context.save (); context.fillStyle = color Context.translate (sx, sy); / / move coordinate origin context.rotate (Math.PI + rotato); / / rotate context.beginPath (); / / create path var x = Math.sin (0); var y = Math.cos (0); var dig = Math.PI / 5 * 4 For (var I = 0; I < 5; iTunes +) {/ / draw the five sides of a pentagram var x = Math.sin (I * dig); var y = Math.cos (I * dig); context.lineTo (x * radius, y * radius);} context.closePath () Context.stroke (); context.fill (); context.restore ();} after reading the above, have you mastered how to use Canvas in HTML5 to draw the five-star red flag? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.