canvas /canvas 是html5出現的新標簽，像所有的dom對象一樣它有自己本身的屬性、方法和事件，其中就有繪圖的方法，js能夠調用它來進行繪圖，本文使用canvas標簽和Javascript配合畫出了一個四色漸變的播放按鈕效果，效果圖： 實現代碼： 復制代碼代碼如下: !DOCTYPE HTML html head meta http-equiv="Content-Type" content="text/html; charset=gbk" title 畫按鈕 /title /head body canvas id="myCanvas" width="600" height="400" 您的瀏覽器不支持Canvas，請升級瀏覽器！ /canvas script type = "text/javascript"
var canvas = document.getElementById('myCanvas');/*獲取定義的畫布*/ var ctx = canvas.getContext('2d');/*利用2維環境中進行繪畫*/ 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); //構造線變 var yellowGrad=_context.createLinearGradient(30,0,0,30); yellowGrad.addColorStop(0, '#fccb02'); yellowGrad.addColorStop(0.5, '#fbf14d'); yellowGrad.addColorStop(1, '#ffcb02'); var blueGrad=_context.createLinearGradient(30,0,0,30); blueGrad.addColorStop(0, '#2a459c'); blueGrad.addColorStop(0.5, '#0e7adc'); blueGrad.addColorStop(1, '#2a459e'); var redGrad=_context.createLinearGradient(30,0,0,30);//通過rotate來旋轉 redGrad.addColorStop(0, '#d0372f'); redGrad.addColorStop(0.5, '#e0675e'); redGrad.addColorStop(1, '#ce392d'); var greenGrad=_context.createLinearGradient(30,0,0,30);//通過rotate來旋轉 greenGrad.addColorStop(0, '#059700'); greenGrad.addColorStop(0.5, '#02e003'); greenGrad.addColorStop(1, '#019a02');
