<form id="hz9zz"></form>
    • <form id="hz9zz"></form>
    

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      如何用HTML5中的canvas繪制漸變矩形
                
                  發表時間：2023-08-29             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]canvas是HTML5中新增的特性，它可以在瀏覽器上繪制出各種酷炫的效果，作為一個前端開發人員，你知道如何用canvas繪制圖形嗎？這篇文章就和大家講講如何用canvas繪制一個矩形及一個漸變色矩形，有一定的參考價值，感興趣的朋友可以參考一下。<canvas> 標簽可以用來繪制圖形，...
      canvas是HTML5中新增的特性，它可以在瀏覽器上繪制出各種酷炫的效果，作為一個前端開發人員，你知道如何用canvas繪制圖形嗎？這篇文章就和大家講講如何用canvas繪制一個矩形及一個漸變色矩形，有一定的參考價值，感興趣的朋友可以參考一下。
      <canvas> 標簽可以用來繪制圖形，但是要通過JavaScript腳本來實現效果，因為<canvas>標簽只是一個裝圖形的容器，效果的實現要借助JavaScript腳本。我們可以用canvas繪制直線，圓形，矩形，字符等等。
      舉例1：用canvas繪制一個紅色矩形，具體步驟如下：
      第一步：用document.getElementById( )找到 <canvas> 元素
      第二步：用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>
      效果圖：
      圖片1.jpg
      舉例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)繪制矩形
      效果如圖所示：
      圖片2.jpg
      以上詳細介紹了用canvas繪制矩形和漸變矩形的方法，比較簡單，初學者可以自己動手嘗試，看看自己能不能繪制出更好看的圖形，希望這篇文章對你有所幫助！
      更多相關教程請訪問 Html5視頻教程
      以上就是如何用HTML5中的canvas繪制漸變矩形的詳細內容，更多請關注php中文網其它相關文章！
      				
				
      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




              
              
                 
              
                                            
                              		       
                          
                           		  
        
                            
      
日韩精品一区二区三区高清