canvas繪制漸變矩形的方法

發(fā)布時(shí)間：2020-05-14 11:24:05 來源：億速云閱讀：359 作者：Leah 欄目：web開發(fā)

這篇文章主要為大家詳細(xì)介紹了canvas繪制漸變矩形的方法，圖文詳解容易學(xué)習(xí)，配合代碼閱讀理解效果更佳，非常適合初學(xué)者入門，感興趣的小伙伴們可以參考一下。

<canvas> 標(biāo)簽可以用來繪制圖形，但是要通過JavaScript腳本來實(shí)現(xiàn)效果，因?yàn)?lt;canvas>標(biāo)簽只是一個(gè)裝圖形的容器，效果的實(shí)現(xiàn)要借助JavaScript腳本。我們可以用canvas繪制直線，圓形，矩形，字符等等。

舉例1：用canvas繪制一個(gè)紅色矩形，具體步驟如下：

第一步：用document.getElementById( )找到 <canvas> 元素

第二步：用getContext("2d")創(chuàng)建 context 對(duì)象

第三步：fillStyle屬性可以設(shè)置矩形顏色，本例將其設(shè)置為紅色；fillRect(x,y,width,height) 方法可以繪制已填色的矩形，x表示矩形左上角的X軸坐標(biāo)，y表示矩形左上角的Y軸坐標(biāo)，width表示矩形的寬度，height表示矩形的高度

完整代碼如下：

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.fillStyle="#FF0000";
  ctx.fillRect(25,10,150,80);
</script>

效果圖：

canvas繪制漸變矩形的方法

舉例2：用canvas繪制一個(gè)漸變矩形，代碼如下所示：

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");  
  // Create gradient
  var grd=ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0,"orange");
  grd.addColorStop(1,"red");  
  // Fill with gradient
  ctx.fillStyle=grd;
  ctx.fillRect(25,10,150,80);
</script>

createLinearGradient(x,y,x1,y1) 可以創(chuàng)建線性漸變，使用漸變時(shí)，必須使用兩種或者兩種以上的顏色

addColorStop()方法表示顏色停止，可以是0至1

用fillStyle設(shè)置矩形顏色，然后用fillRect(x,y,width,height)繪制矩形

效果如圖所示：

canvas繪制漸變矩形的方法

以上就是canvas繪制漸變矩形的方法，代碼詳細(xì)清楚，如果在日常工作遇到這個(gè)問題，希望你能通過這篇文章解決問題。如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

canvas繪制漸變矩形的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽