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

This article will explain in detail how to use canvasContext.arc in WeChat Mini Programs. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

CanvasContext.arc definition

Draw an arc.

Tip: to create a circle, you can use the arc () method to specify a starting Radian of 0 and an ending Radian of 2 * Math.PI.

Tip: use the stroke () or fill () methods to draw arcs in canvas.

The parameter type describes the x coordinate of the xNumber circle, the x coordinate of the yNumber circle, the y coordinate of the rNumber circle, the radius of the rNumber circle sAngleNumber start Radian, and the unit Radian (at 3 o'clock) eAngleNumber termination Radian counterclockwiseBoolean is optional. Specifies whether the direction of radians is counterclockwise or clockwise. The default is false, which is clockwise. Example const ctx = wx.createCanvasContext ('myCanvas') / / Draw coordinatesctx.arc (100,75,50,0,2 * Math.PI) ctx.setFillStyle (' # EEEEEE') ctx.fill () ctx.beginPath () ctx.moveTo (40,75) ctx.lineTo (160,75) ctx.moveTo (100,15) ctx.lineTo (100,135) ctx.setStrokeStyle ('# AAAAAA') ctx.stroke () ctx.setFontSize (12) ctx.setFillStyle ('black') ctx.fillText (' 0,165) 78) ctx.fillText ('0.5 Math.PI, 83,145) ctx.fillText (' 1 million pipeting, 15,78) ctx.fillText ('1.5 million pipette, 83,10) / / Draw pointsctx.beginPath () ctx.arc (100,75,2,0,2 * Math.PI) ctx.setFillStyle (' lightgreen') ctx.beginPath () ctx.arc (100,25,2,0) 2 * Math.PI) ctx.setFillStyle ('blue') ctx.fill () ctx.beginPath () ctx.arc (150,75,2,0,2 * Math.PI) ctx.setFillStyle (' red') ctx.fill () / / Draw arcctx.beginPath () ctx.arc (100,75,50,0,1.5 * Math.PI) ctx.setStrokeStyle ('# 333333') ctx.stroke () ctx.draw ()

The three key coordinates for arc (100,75,50,0,1.5 * Math.PI) are as follows:

Green: Center of circle (100,75)

Red: start Radian (0)

Blue: end Radian (1.5 * Math.PI)

This is the end of the article on "how to use canvasContext.arc in WeChat Mini Programs". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.