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

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      如何用HTML5中的canvas完成漸變文字的效果
                
                  發表時間：2023-08-29             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]<canvas>是HTML5中新增的標簽，它可以用來繪制圖像，但是必須借助JavaScript腳本實現效果，對于HTML5中的canvas你了解多少？這篇文章就和大家講講如何用canvas制作漸變文字效果，對canvas繪制漸變感興趣的朋友，可以參考一下。用HTML5中的canvas ...
      <canvas>是HTML5中新增的標簽，它可以用來繪制圖像，但是必須借助JavaScript腳本實現效果，對于HTML5中的canvas你了解多少？這篇文章就和大家講講如何用canvas制作漸變文字效果，對canvas繪制漸變感興趣的朋友，可以參考一下。
      用HTML5中的canvas 實現漸變文字效果，需要用到的語法及參數設置如下，不清楚的小伙伴可以看看。
      1、fillText( )
      語法：context.fillText(text,x,y,maxWidth)
      text表示需要在畫布上輸出的文本
      x表示開始繪制文本的X軸坐標
      y表示開始繪制文本的 Y軸坐標
      maxWidth 表示允許的最大文本寬度，單位是像素，是一個可選值。
      2、createLinearGradient( )
      語法：context.createLinearGradient(x0,y0,x1,y1)
      x0 表示漸變開始點的X軸坐標 
      y0 表示漸變開始點的Y軸坐標 
      x1 表示漸變結束點的X軸坐標 
      y1 表示漸變結束點的Y軸坐標 
      舉:1：制作一個普通文字（無顏色漸變），代碼如下：
      <!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <canvas id="myCanvas" width="300" height="150" style="border:1px solid #ccc;"></canvas>
 </body>
 <script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");  
  ctx.font="20px Georgia";
  ctx.fillText("學習使我快樂",10,50);
 </script>
</html>
      效果圖如圖所示：
      aa.jpg
      舉例2：制作一個漸變文字，具體代碼如下：
      ctx.font="30px Verdana";
  // Create gradient
  var gradient=ctx.createLinearGradient(0,0,c.width,0);
  gradient.addColorStop("0","orange");
  gradient.addColorStop("0.5","blue");
  gradient.addColorStop("1.0","red");
  // Fill with gradient
  ctx.fillStyle=gradient;
  ctx.fillText("have a nice day ",10,100);
      效果圖：
      bb.jpg
      制作漸變文字時，首先要用createLinearGradient( )創建一個漸變，然后用fillStyle將漸變運用于文字上。
      以上給大家介紹了如何用HTML5中的canvas制作漸變文字效果，既簡單又實用，初學者可以自己動手實踐，希望你可以制作出更加炫酷的效果。
      更多相關課程請訪問 Html5視頻教程
      以上就是如何用HTML5中的canvas實現漸變文字的效果的詳細內容，更多請關注php中文網其它相關文章！
      				
				
      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




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