首頁 >web前端 >html教學 >如何用HTML5中的canvas繪製漸層矩形

如何用HTML5中的canvas繪製漸層矩形

yulia原創: 2018-10-19 17:44:453152瀏覽

canvas是HTML5中新增的特性，它可以在瀏覽器上繪製出各種酷炫的效果，作為一個前端開發人員，你知道如何用canvas繪製圖形嗎？這篇文章就跟大家講講如何用canvas繪製一個長方形及一個漸層色長方形，有一定的參考價值，有興趣的朋友可以參考一下。

範例1：用canvas繪製一個紅色矩形，具體步驟如下：

第一步：用document.getElementById( )找到

#第二步：用getContext("2d")建立context 物件

第三步：fillStyle屬性可以設定矩形顏色，本例設定為紅色；fillRect(x,y,width,height) 方法可以繪製已填色的矩形，x表示矩形左上角的X軸座標，y表示矩形左上角的Y軸座標，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>

效果圖：

如何用HTML5中的canvas繪製漸層矩形

範例2：用canvas繪製漸變矩形，程式碼如下所示：

<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) 可以建立線性漸變，使用漸變時，必須使用兩種或兩種以上的顏色

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

用fillStyle設定矩形顏色，然後用fillRect(x,y,width,height)繪製矩形

#效果如圖所示：

如何用HTML5中的canvas繪製漸層矩形

以上詳細介紹了用canvas繪製長方形和漸層矩形的方法，比較簡單，初學者可以自己嘗試，看看能不能繪製出更好看的圖形，希望這篇文章對你有幫助！

更多相關教學請造訪 Html5影片教學

以上是如何用HTML5中的canvas繪製漸層矩形的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html5 对象 canvas

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Web應用程式中富交互的撤銷與前進操作的實作方法介紹（程式碼）下一篇：Web應用程式中富交互的撤銷與前進操作的實作方法介紹（程式碼）

看更多