最近在研究HTML5，發現其中的canvas用途很廣。不但可以繪製圖形，還可以製作圖片線性漸變，而且還能渲染文字做成特效。覺得挺有趣，於是把學習的內容記錄起來了。

     1.繪製圓形圖

  Html程式碼：   <canvas id="roundness" width="600" height="300">
                  
                      </canvas>

   js程式碼：     var canvas = document.getElementById("roundness");
                    var context = canvas.getContext("2d");
                    context.strokeStyle = "aqua";//圓形的顏色
                    context.lineWidth = "2";
                    context.beginPath();
                   context.arc(100,100,40,0,2*Math.PI);  //40此值設定圓形的大小

                   context.stroke();

效果如下圖：

 2.繪製五角星

 Html程式碼：  <canvas id="canvasFive" width="600" height="250">
                             
                       </canvas>

 js程式碼：      var canvas = document.getElementById("canvasFive");
                    var context = canvas.getContext("2d");
                    context.beginPath();
                    //設定是個頂點的座標，根據頂點制定路徑
                    for (var i = 0; i < 5; i++) {
                   context.lineTo(Math.cos((18+i*72)/180*Math.PI)*50+200,
                         -Math.sin((18+i*72)/180*Math.PI)*50+200);
                  context.lineTo(Math.cos((54+i*72)/180*Math.PI)*20+200,
                         -Math.sin((54+i*72)/180*Math.PI)*20+200);
                   }
             context.closePath();
             //設定邊框樣式以及填充顏色
            context.lineWidth="3";
            context.fillStyle = "red";
            context.strokeStyle = "wheat";
            context.fill();
            context.stroke();

 效果如下圖：

3.繪製矩形

Html程式碼：  <canvas id="canvasFour" width="600" height="200">
                          
                   </canvas>

js程式碼：     

                 var canvas = document.getElementById("canvasFour");
                 var context = canvas.getContext("2d");

               context.rect(10,10,150,150);
               context.lineWidth = 2;
              context.fillStyle = "cyan"; //設定填充顏色
               context.strokeStyle = "#F5270B";  //邊框顏色
              context.fill();
               context.stroke();

效果如下圖：

4.製作圖片顏色線性漸變

  Html程式碼：     <canvas id="change" width="500" height="300">
               
                         </canvas>

   js程式碼：        var canvas = document.getElementById("line");
                        var context = canvas.getContext("2d");
                        var grd = context.createLinearGradient( 50 , 250, 500 , 800 );
                       grd.addColorStop(0,"white");   //設定顏色
                       grd.addColorStop(0.25,"blue");  //設定顏色
                       grd.addColorStop(0.5,"yellow"); //設定顏色
                       grd.addColorStop(0.75,"purple"); //設定顏色
                       grd.addColorStop(1,"black");
                       context.fillStyle = grd;
                      context.fillRect(50,250,500,800);      

效果如下圖：

 5.畫一條直線，長度可選。

 Html程式碼： <canvas id="canvas" width="600" height="200">
                        
                    </canvas>

  js程式碼：

                 var canvas = document.getElementById("canvas");
                 var context = canvas.getContext("2d");
                 context.beginPath();
                 context.moveTo(100,100);
                context.lineTo(600,100);

                context.lineWidth = 2;
                context.strokeStyle = "#F5270B";
                context.stroke();

效果如下圖：