線性漸變
Var grd=context.createLinearGradient(xStart,yStart,xEnd,yEnd)
（xStart,yStart）起點，（xEnd,yEnd）終點
grd.addColorStop(offset,color);
offset范圍是0~1之間的浮點數，color是關鍵顏色
二、
徑向漸變
Var grd=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
(xStart,yStart,radiusStart)起點圓的中心點坐標和半徑，（xEnd,yEnd,radiusEnd）終點圓的中心點坐標和半徑
三、
坐標變換
1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>線性漸變-徑向漸變-坐標變換</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 8 </head> 9 10 <body> 11 <canvas id="canvas" width="500" height="500"></canvas> 12 <script type="text/javascript"> 13 var oCanvas = document.getElementById("canvas"); 14 var context = oCanvas.getContext("2d"); 15 //定一個變量，線性漸變 16 var grd = context.createLinearGradient(0, 0, 500, 0); //（xStart,yStart）起點，（xEnd,yEnd）終點 17 grd.addColorStop(0, '#ff0'); //offset范圍是0~1之間的浮點數，color是關鍵顏色 18 grd.addColorStop(0.5, '#f30'); 19 grd.addColorStop(1, '#7fc259'); 20 context.fillStyle = grd; 21 context.fillRect(0, 0, 500, 500); 22 23 //徑向漸變 24 context.beginPath(); //開始 25 var grdCirle = context.createRadialGradient(100, 100, 50, 100, 100, 100); 26 //(xStart,yStart,radiusStart)起點圓的中心點坐標和半徑，（xEnd,yEnd,radiusEnd）終點圓的中心點坐標和半徑 27 grdCirle.addColorStop(0, "#f7f8fa"); //起點 28 grdCirle.addColorStop(0.5, "red"); 29 grdCirle.addColorStop(1, "#53c5d9"); //終點 30 context.fillStyle = grdCirle; 31 context.arc(100, 100, 100, 0, 2 * Math.PI); //畫一個圓 32 context.fill(); //填充 33 context.closePath(); //關上 34 35 context.beginPath(); 36 var graA = context.createRadialGradient(300, 100, 50, 310, 110, 20); 37 graA.addColorStop(0, "#632cd2"); 38 graA.addColorStop(0.3, "#91bd1c"); 39 graA.addColorStop(0.7, "#e06a29"); 40 graA.addColorStop(1, "#27cd46"); 41 context.fillStyle = graA; 42 context.arc(300, 100, 100, 0, 2 * Math.PI); 43 context.fill(); 44 context.closePath(); 45 46 47 context.translate(250, 250);//移動坐標原點 48 //坐標變換 49 for(var i = 0; i < 30; i++) { 50 context.rotate(Math.PI/10);//旋轉角度 51 context.scale(0.95,0.95);//縮小比例 52 context.beginPath(); 53 context.fillStyle = "rgba(255,157,0,0.5)"; 54 context.fillRect(100, 100, 120, 60); 55 context.closePath(); 56 } 57 </script> 58 </body> 59 60 </html>
Context.translate(x,y)
Context.scale(x,y);
Context.rotate(angle);