HTML5创建一个径向/圆渐变

最新推荐文章于 2021-09-30 17:29:49 发布

可能黑客

最新推荐文章于 2021-09-30 17:29:49 发布

阅读量1.3k

点赞数

分类专栏： HTML+Javascript+CSS

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

119 篇文章

订阅专栏

本文展示了如何使用HTML5在网页上创建一个径向/圆渐变，通过JavaScript代码实现了从黄色到蓝色的颜色过渡，并在画布上绘制了一个矩形区域作为演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、设计源码

[html]view plaincopy 
   
 <!doctype html>  
 <html>  
 <head>  
 <meta charset="utf-8">  
 <title>HTML5创建一个径向/圆渐变</title>  
 <script type="text/javascript">  
     /**  
      * 创建一个径向/圆渐变  
      */  
     function drawCircle()  
     {  
         //找到<canvas>元素  
         var canvas = document.getElementById("canvas");  
         //创建context对象  
         var ctx = canvas.getContext("2d");  
         //创建一个径向/圆渐变  
         var gradient = ctx.createRadialGradient(200,200,5,90,60,200);  
         //方法规定 gradient 对象中的颜色和位置  
         gradient.addColorStop(0,"yellow");  
         //方法规定 gradient 对象中的颜色和位置  
         gradient.addColorStop(1,"blue");  
         //设置填充样式  
         ctx.fillStyle = gradient;  
         //填充一个矩形区域  
         ctx.fillRect(40,20,600,400);  
     }  
 </script>  
 </head>  
   
 <body onLoad="drawCircle();">  
    <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.createRadialGradient(200,200,5,90,60,200);  

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

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

（5）设置填充样式

[javascript]view plaincopy 
   
 ctx.fillStyle = gradient;  

（6）填充一个矩形区域

[javascript]view plaincopy 
   
 ctx.fillRect(40,20,600,400);  

  转载自：http://blog.youkuaiyun.com/you23hai45/article/details/50095193