• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  canvas createRadialGradient() 徑向漸變

                  2018-8-9 08:59| 作者: admin| 查看: 1164| 評論: 0|來自: 螞蟻部落

                  徑向漸變就是從起點到終點顏色進行圓形漸變。

                  推薦參閱教程板塊canvas createLinearGradient()一文。

                  語法結構:

                  [JavaScript] 純文本查看 復制代碼
                  createRadialGradient(x1,y1,r1,x2,y2,r2)

                  參數解析:

                  (1).x1,y1:規定漸變起點圓心坐標。

                  (2).r1:規定漸變起點圓的半徑尺寸。

                  (3).x2,y2:規定漸變終點圓心坐標。

                  (4).r2:規定漸變終點圓的半徑尺寸。

                  既然是顏色的漸變,那么就需要添加顏色,使用addColorStop方法即可實現。

                  addColorStop()方法具有兩個參數,第一個參數規漸變顏色的起點位置,第二個參數規定漸變顏色。

                  先看一個圖示:

                  a:3:{s:3:\"pic\";s:43:\"portal/201808/09/090140uqp0zcvq9htb9pbs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  可能不少朋友想當然的認為,漸變是從起點圓心開始,到終點圓外層結束。事實并非如此,漸變區域是紫色之間的區域。

                  代碼實例如下:

                  [HTML] 純文本查看 復制代碼运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>螞蟻部落</title>
                  <style>
                  canvas {
                    border: 2px dotted #ccc;
                    margin: 50px;
                  }
                  </style>
                  <script type="text/javascript">
                  window.onload = function () {
                    var cvs = document.getElementById("canvas");
                    var ctx = cvs.getContext('2d');
                    var gnt = ctx.createRadialGradient(200, 300, 50, 200, 200, 200);
                    gnt.addColorStop(0, 'green');
                    gnt.addColorStop(0.3, 'blue');
                    gnt.addColorStop(1, 'red');
                    ctx.fillStyle = gnt;
                    ctx.arc(200, 300, 200, 0, 2 * Math.PI);
                    ctx.fill();
                  }
                  </script>
                  </head>
                  <body>
                  <canvas id="canvas" width="800" height="600"></canvas>
                  </body>
                  </html>

                  上面的代碼實現了徑向漸變的演示,下面對代碼做一下分析。

                  代碼分析:

                  (1).添加了綠色、藍色和紅色為漸變顏色。

                  (2).劃分漸變的區域是漸變開始圓的外緣到漸變結束圓外緣,也就是上面圖片紫色之間的區域。如果這段區域整體為1,那么0.3就是百分之30處。0-0.3是由綠色漸變為藍色,0.3-1是由藍色漸變為紅色。

                  (3).addColorStop()方法的調用對象并不是繪圖環境對象,而是createRadialGradient()方法的返回對象。

                  (4).漸變的起點之前和漸變的終點之后填充對應的起點純色和終點純色。

                  特別說明:如果起點圓的半徑大于終點圓的半徑,那么就反過來變成從外到內的漸變。


                  鮮花

                  握手

                  雷人

                  路過

                  雞蛋

                  最新評論

                  返回頂部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>