首頁 > 開發者 > 網站開發

HTML5漸層實現，html5漸層

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

HTML5漸層實現，html5漸層
漸層

        Context對象可以通過createLinearGradient()和createRadialGradient()兩個方法建立漸層對象，這兩個方法的原型如下：

        Object createLinearGradient(x1, y1, x2, y2);

        建立一個從(x1, y1)點到(x2, y2)點的線性漸層對象。

         Object createRadialGradient(x1, y1, r1, x2, y2, r2);

         建立一個從以(x1, y1)點為圓心、r1為半徑的圓到以(x2, y2)點為圓心、r2為半徑的圓的放射狀漸層對象。

         漸層對象建立完成之後必須使用它的addColorStop()方法來添加顏色，該方法的原型如下：

         void addColorStop(position, color);

         其中position表示添加顏色的位置，取值範圍為[0, 1]，0表示起點，1表示終點；color表示添加的顏色，取值可以是任何CSS顏色值。

         漸層對象建立並配置完成之後就可以將其賦予Context對象的strokeStyle屬性或者fillStyle屬性，然後繪製的圖形就具有了所需的漸層效果。

    那咱們一起看一下下面這個例子： 

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">canvas{left: 50%; position:relative; margin-left: -200px; top;}</style></head><body><canvas id="drawDiagonal" width="400" height="500" style="border: 1px solid #008B8B;"></canvas></body><script type="text/javascript">var canvas=document.getElementById('drawDiagonal');var cd=canvas.getContext('2d');cd.save();cd.translate(-10,350);cd.beginPath();cd.moveTo(0,0);cd.quadraticCurveTo(170,-80,260,-190);cd.quadraticCurveTo(310,-250,410,-250);cd.strokeStyle='#663300';cd.lineWidth=50;cd.stroke();cd.restore();var lg = cd.createLinearGradient(80,220,240, 200); //可以嘗試改變這裡的參數，改變不同的效果；             lg.addColorStop(0, 'yellow');              lg.addColorStop(0.9, '#3CB371');         lg.addColorStop(1,'#2E8B57');        cd.fillStyle=lg;//把設定好的顏色值附給cd                cd.strokeStyle ='yellowgreen';cd.lineWidth=4;cd.lineJoin='round'cd.beginPath();cd.moveTo(200,40);cd.lineTo(160,100);cd.lineTo(185,100);cd.lineTo(145,160);cd.lineTo(170,160);cd.lineTo(135,220);cd.lineTo(180,220);cd.lineTo(170,320);cd.lineTo(235,320);cd.lineTo(220,220)cd.lineTo(260,220);cd.lineTo(225,160);cd.lineTo(250,160);cd.lineTo(210,100);cd.lineTo(235,100);cd.closePath();cd.fill();cd.stroke();</script></html>


其效果如所示：


大家試圖去嘗試一下！哪裡有不明白的地方可以相互交流.

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More