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

This article is about how to use Canvas to draw four gradient color playback buttons. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Html5 is a new tag, like all dom objects, it has its own properties, methods and events, in which there are drawing methods, js can call it to draw, this paper uses canvas tags and Javascript to draw a four-color gradient play button effect.

Implementation code:

The code is as follows:

Draw button

Your browser does not support Canvas, please upgrade your browser!

Var canvas = document.getElementById ('myCanvas'); / * get the defined canvas * /

Var ctx = canvas.getContext ('2d'); / * paint in 2D environment * /

DrawPlayButton (ctx,200200)

DrawPlayButton (ctx,400200)

DrawPlayButton (ctx,300200)

Function drawPlayButton (_ context,x,y) {

Var nRadius=30;// radius

_ context.save ()

_ context.translate (XBI y)

/ / structural line transformation

Var yellowGrad=_context.createLinearGradient (30pr 0pl 0pl 30)

YellowGrad.addColorStop (0,'# fccb02')

YellowGrad.addColorStop (0.5,'# fbf14d')

YellowGrad.addColorStop (1,'# ffcb02')

Var blueGrad=_context.createLinearGradient (30pr 0pl 0pl 30)

BlueGrad.addColorStop (0,'# 2a459c')

BlueGrad.addColorStop (0.5,'# 0e7adc')

BlueGrad.addColorStop (1,'# 2a459e')

Var redGrad=_context.createLinearGradient (30, 010, 0, 30); / / rotate through rotate

RedGrad.addColorStop (0,'# d0372f')

RedGrad.addColorStop (0.5,'# e0675e')

RedGrad.addColorStop (1,'# ce392d')

Var greenGrad=_context.createLinearGradient (30, 010, 0, 30); / / rotate through rotate

GreenGrad.addColorStop (0,'# 059700')

GreenGrad.addColorStop (0.5,'# 02e003')

GreenGrad.addColorStop (1,'# 019a02')

/ / draw the angle between two arcs

DrawCake (_ context,0,yellowGrad,nRadius)

DrawCake (_ context,Math.PI/2,blueGrad,nRadius)

DrawCake (_ context,Math.PI,redGrad,nRadius)

DrawCake (_ context,3*Math.PI/2,greenGrad,nRadius)

/ / Inner circle color

Var lingrad = _ context.createLinearGradient (- 30 flint 30 penny 30)

Lingrad.addColorStop (0,'# 4672df')

Lingrad.addColorStop (0.2,'# 6188e5')

Lingrad.addColorStop (0.5,'# 98b1ef')

Lingrad.addColorStop (0.8,'# b1c3f2')

Lingrad.addColorStop (1,'# eaedfc')

_ context.save ()

_ context.beginPath (); / / Inner circle

_ context.fillStyle=lingrad

_ context.arc (0pj0rem n Radiuslue 10d0m Math.PIQU2JING true)

_ context.fill ()

_ context.closePath ()

_ context.restore ()

/ / draw triangles

Var trianglerad=_context.createLinearGradient (- 6 people, 10 people, 10 people)

Trianglerad.addColorStop (0,'# 99d4ea')

Trianglerad.addColorStop (0.2,'# 5e8fdd')

Trianglerad.addColorStop (0.5,'# 0f17a1')

Trianglerad.addColorStop (0.8,'# 4c65cc')

Trianglerad.addColorStop (1,'# 7299e5')

_ context.beginPath ()

_ context.fillStyle=trianglerad

_ context.moveTo (12pc0)

_ context.lineTo (- 6pc10)

_ context.lineTo (- 6Mae Murray 10)

_ context.fill ()

_ context.restore ()

}

/ / draw a fan

Function drawCake (_ context,_nRotateAngle,_fillColor,_nRadius) {

_ context.save ()

_ context.beginPath ()

_ context.fillStyle=_fillColor

_ context.rotate (_ nRotateAngle)

_ context.moveTo (_ nRadius-10,0)

_ context.lineTo (_ nRadius,0); / / draw a line to the right

_ context.arc (0penny 0penny Radiusrection 0Magi Math.PIpact 2penny false)

_ context.lineTo (0legal RadiusMutual 10); / / draw one up

_ context.arc. / / draw an inner arc counterclockwise

_ context.fill ()

_ context.closePath ()

_ context.restore ()

}

Thank you for reading! This is the end of this article on "how to use Canvas to draw four gradient color play buttons". 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, you can 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.