HTML5Canvas如何繪制動態(tài)線性漸變

這篇文章將為大家詳細講解有關HTML5 Canvas如何繪制動態(tài)線性漸變，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

創(chuàng)新互聯(lián)公司專注于城中網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。熱誠為您提供城中營銷型網站建設，城中網站制作、城中網頁設計、城中網站官網定制、微信小程序服務，打造城中網絡公司原創(chuàng)品牌,更為您提供城中網站排名全網營銷落地服務。

如果要使用HTML5 Canvas繪制線性漸變，需要用到createLinearGradient()方法。下面我們就來一起看看具體的內容。

HTML5 Canvas如何繪制動態(tài)線性漸變

createLinearGradient()

createLinearGradient()的參數如下。

createLinearGradient（漸變開始位置的X坐標，漸變開始位置的Y坐標，漸變結束位置的X坐標，漸變結束位置的Y坐標）

我們來看具體示例

代碼如下

說明：

body標簽的onload事件在顯示頁面時執(zhí)行PageLoad（）函數。
顯示頁面時，將處理除事件偵聽器之外的以下代碼。
在畫布上繪圖使用getElementsByTagName（）方法從ID獲取畫布對象。調用canvas對象上的getContext（）方法以獲取畫布的上下文。通過調用clearRect（）方法初始化畫布。
創(chuàng)建漸變是由createLinearGradient（）方法創(chuàng)建的。如果創(chuàng)建成功，則將返回漸變對象作為返回值。漸變的開始顏色和結束顏色由漸變對象的addColorStop（）方法設置。
在畫布上繪制漸變可以通過將漸變對象指定給上下文的fillStyle并執(zhí)行fillRect（）方法來在畫布上繪制漸變。

   function PageLoad() {
      var CanvasWidth = 1200;
      var CanvasHeight = 480;
      var canvas = document.getElementsByTagName('canvas')[0],
          ctx = null,
          grad = null,
          color = 255;
      if (canvas.getContext('2d')) {
        ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
        grad = ctx.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
        grad.addColorStop(0, '#000000');
        grad.addColorStop(1, '#2869fd');
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
      }
    }

如果在畫布中移動鼠標指針，則會執(zhí)行以下事件偵聽器的代碼。
從鼠標指針坐標到畫布右下角創(chuàng)建一個線性漸變，并在畫布上繪制它。

canvas.addEventListener('mousemove', function (evt) {
          var width = window.innerWidth,
          height = window.innerHeight,
          x = event.clientX,
          y = event.clientY,
          grad = ctx.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
          grad.addColorStop(0, '#000000');
          grad.addColorStop(1, '#2869fd');
          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);

運行結果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的屏幕，完成漸變繪圖。

HTML5 Canvas如何繪制動態(tài)線性漸變