How to draw a Ring with canvas in vue

This article mainly introduces "vue how to use canvas to draw circles" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "vue how to use canvas to draw rings" article can help you solve the problem.

Effect picture:

/ / html / / jsmounted () {var medium_canvas = document.getElementById ('medium-graph-canvas') this.drawMain (medium_canvas, 60, 2,' # 435377')}, methods: {drawMain (drawing_elem, percent, colornums, bgcolor) {/ * @ drawing_elem: drawing object @ percent: percentage of rings drawn Range [0100] @ forecolor: draw the foreground color of the torus Color code @ bgcolor: draw the background color of the ring, color code @ colornums: passed as a parameter Which color to draw * / var context = drawing_elem.getContext ('2d') var center_x = drawing_elem.width / 2 var center_y = drawing_elem.height / 2 var rad = (Math.PI * 2) / 100 var speed = 0 / / draw the background circle function backgroundCircle () {context.save () context.beginPath () context.lineWidth = 8 / / set lineweight var radius = center_x-context.lineWidth context.lineCap = 'round' context.strokeStyle = bgcolor context.arc (center_x) Center_y, radius-14,0, Math.PI * 2 False) context.stroke () context.closePath () context.restore ()} / / draw the moving ring function foregroundCircle (n) {context.save () / / context.strokeStyle = forecolor / / determine the color of the ring Context.lineWidth = 22 context.lineCap = 'round' var radius = center_x-context.lineWidth context.beginPath () / / if (colornums = = 1) {/ / var g = context.createLinearGradient (0 0,180,0) / / create gradient object gradient start and end points / / g.addColorStop (0,'# 64C58F') / / add color points / / g.addColorStop (1 '# 0084FF') / add color point / / context.strokeStyle = g / / use the color of the gradient object as the ring / /} if (colornums = = 2) {var g = context.createLinearGradient (0,0,180,0) g.addColorStop (0) '# E7954C') g.addColorStop (1,' # D36638') context.strokeStyle = g} / / if (colornums = = 3) {/ / var g = context.createLinearGradient (0,0,180,0) / / g.addColorStop (0) '# FF7C78') / g.addColorStop (1,' # FD413E') / / context.strokeStyle = g / /} context.arc (center_x, center_y, radius,-Math.PI / 4 -Math.PI / 4 + n * rad, false) / / for drawing arc context.arc (x coordinates) Y coordinate, radius, start angle, end angle Clockwise / counterclockwise) context.stroke () context.closePath () context.restore ()} / / draw text function text (n) {/ / context.save () / / save and restore guarantee that the style attribute is only applied to the canvas element / / context.fillStyle = forecolor / / var font_size = 40 / / context.font = font_size +'px Helvetica' / / var text_width = context.measureText (n.toFixed (0) +'%'). Width / / context.fillText (n.toFixed (0) +'%' Center_x-text_width / 2 Center_y + font_size / 2) / / context.restore ()} / / execute animation (function drawFrame () {if (speed = percent) {speed + +} else {speed + = 1}) }) ()}} This is the end of the introduction to "how vue draws circles with canvas". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.