Canvas畫的四漸變色播放按鈕效果

1、canvas畫的四漸變色播放按鈕效果這篇文章主要介紹了用法javascript和html5 canvas畫的四漸變色播放按鈕效果,需要的伴侶可以參考下是html5浮現(xiàn)的新標(biāo)簽，像全部的dom對(duì)象一樣它有自己本身的屬性、辦法和大事，其中就有繪圖的辦法，js能夠調(diào)用它來舉行繪圖，本文用法canvas標(biāo)簽和javascript協(xié)作畫出了一個(gè)四色漸變的播放按鈕效果。 實(shí)現(xiàn)代碼： 復(fù)制代碼代碼如下:畫按鈕您的掃瞄器不支持canvas，請(qǐng)升級(jí)掃瞄器！ var canvas = document.getelementbyid(&39;mycanvas&39;);/*獵取定義的畫布*/var

2、ctx = canvas.getcontext(&39;2d&39;);/*利用2維環(huán)境中舉行繪畫*/drawplaybutton(ctx,200,200);drawplaybutton(ctx,400,200);drawplaybutton(ctx,300,200);function drawplaybutton(_context,x,y)var nradius=30;/半徑_context.save();_context.translate(x,y);/構(gòu)造線變var yellowgrad=_context.createlineargradient(30,0,0,30);y

3、ellowgrad.addcolorstop(0, &39;fccb02&39;);yellowgrad.addcolorstop(0.5, &39;fbf14d&39;);yellowgrad.addcolorstop(1, &39;ffcb02&39;);var bluegrad=_context.createlineargradient(30,0,0,30);bluegrad.addcolorstop(0, &39;2a459c&39;);bluegrad.addcolorstop(0.5, &39;0e7adc&a

4、mp;39;);bluegrad.addcolorstop(1, &39;2a459e&39;);var redgrad=_context.createlineargradient(30,0,0,30);/通過rotate來旋轉(zhuǎn)redgrad.addcolorstop(0, &39;d0372f&39;);redgrad.addcolorstop(0.5, &39;e0675e&39;);redgrad.addcolorstop(1, &39;ce392d&39;);var greengrad=_context.createlin

5、eargradient(30,0,0,30);/通過rotate來旋轉(zhuǎn)greengrad.addcolorstop(0, &39;059700&39;);greengrad.addcolorstop(0.5, &39;02e003&39;);greengrad.addcolorstop(1, &39;019a02&39;); /繪制兩弧夾角內(nèi)容drawcake(_context,0,yellowgrad,nradius);drawcake(_context,math.pi/2,bluegrad,nradius);drawcake(_context

6、,math.pi,redgrad,nradius);drawcake(_context,3*math.pi/2,greengrad,nradius);/內(nèi)圓色彩var lingrad =_context.createlineargradient(-30,-30,30,30);lingrad.addcolorstop(0, &39;4672df&39;);lingrad.addcolorstop(0.2, &39;6188e5&39;);lingrad.addcolorstop(0.5, &39;98b1ef&39;);lingrad.addcol

7、orstop(0.8, &39;b1c3f2&39;);lingrad.addcolorstop(1, &39;eaedfc&39;);_context.save();_context.beginpath();/內(nèi)圓_context.fillstyle=lingrad;_context.arc(0,0,nradius-10,0,math.pi*2,true);_context.fill();_context.closepath();_context.restore();/繪制三角var trianglerad=_context.createlineargradi

8、ent(-6,-10,-6,10);trianglerad.addcolorstop(0, &39;99d4ea&39;);trianglerad.addcolorstop(0.2, &39;5e8fdd&39;);trianglerad.addcolorstop(0.5, &39;0f17a1&39;);trianglerad.addcolorstop(0.8, &39;4c65cc&39;);trianglerad.addcolorstop(1, &39;7299e5&39;);_context.beginpa

9、th();_context.fillstyle=trianglerad;_context.moveto(12,0);_context.lineto(-6,10);_context.lineto(-6,-10);_context.fill();_context.restore();/繪畫一個(gè)扇形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);/向右畫一根線_context.arc(0,0,_nradius,0,math.pi/2,false);_context.lin