HTML5创建线条渐变

最新推荐文章于 2023-07-22 15:29:40 发布

可能黑客

最新推荐文章于 2023-07-22 15:29:40 发布

阅读量814

点赞数

分类专栏： HTML+Javascript+CSS

HTML+Javascript+CSS 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

1、设计源码

[html]view plaincopy 
   
 <!doctype html>  
 <html>  
 <head>  
 <meta charset="utf-8">  
 <title>HTML5创建线条渐变</title>  
 <script type="text/javascript">  
     /**  
      * 创建线条渐变  
      */  
     function drawGradualText()  
     {  
         //找到<canvas>元素  
         var canvas = document.getElementById("canvas");  
         //创建context对象  
         var ctx = canvas.getContext("2d");  
         //创建线条渐变  
         var gradient = ctx.createLinearGradient(0,0,400,0);  
         //方法规定 gradient 对象中的颜色和位置  
         gradient.addColorStop(0,"yellow");  
         //方法规定 gradient 对象中的颜色和位置  
         gradient.addColorStop(1,"blue");  
         //设置填充样式  
         ctx.fillStyle = gradient;  
         //填充一个矩形区域  
         ctx.fillRect(40,20,600,400);  
     }  
 </script>  
 </head>  
   
 <body onLoad="drawGradualText();">  
    <canvas id="canvas" width="1000" height="800"></canvas>  
 </body>  
 </html>  

2、实现结果

3、源码说明

（1）找到<canvas>元素

[javascript]view plaincopy 
   
 var canvas = document.getElementById("canvas");  

（2）创建context对象

[javascript]view plaincopy 
   
 var ctx = canvas.getContext("2d");  

（3）创建线条渐变

[javascript]view plaincopy 
   
 var gradient = ctx.createLinearGradient(0,0,400,0);  

（4）规定 gradient 对象中的颜色和位置

[javascript]view plaincopy 
   
 gradient.addColorStop(0,"yellow");  
 gradient.addColorStop(1,"blue");  

（5）设置填充样式

[javascript]view plaincopy 
   
 ctx.fillStyle = gradient;  

（6）填充一个矩形区域

[javascript]view plaincopy 
   
 ctx.fillRect(40,20,600,400);  
 
  转载自：http://blog.csdn.net/you23hai45/article/details/50095051

可能黑客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5创建线条渐变

1、设计源码[html] view plaincopy> html> head> meta charset="utf-8"> title>HTML5创建线条渐变title> script type="text/javascript"> /** * 创建线条渐变 */
复制链接

扫一扫