HTML5渐变实现

最新推荐文章于 2023-08-19 17:00:00 发布
最新推荐文章于 2023-08-19 17:00:00 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： html5+css+js 文章标签： html5 canvas javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/navysir8/article/details/44488621
版权

渐变

        Context对象可以通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象，这两个方法的原型如下：

        Object createLinearGradient(x1, y1, x2, y2);

        创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。

         Object createRadialGradient(x1, y1, r1, x2, y2, r2);

         创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。

         渐变对象创建完成之后必须使用它的addColorStop()方法来添加颜色，该方法的原型如下：

         void addColorStop(position, color);

         其中position表示添加颜色的位置，取值范围为[0, 1]，0表示起点，1表示终点；color表示添加的颜色，取值可以是任何CSS颜色值。

         渐变对象创建并配置完成之后就可以将其赋予Context对象的strokeStyle属性或者fillStyle属性，然后绘制的图形就具有了所需的渐变效果。

    那咱们一起看一下下面这个例子：

  
  

   
   <!DOCTYPE html>
  
  

  
  

   
   <html>
  
  

  
  
	
   
   <head>
  
  

  
  
		
   
   <meta 
   
   charset=
   
   "utf-8"
   
   >
  
  

  
  
		
   
   <title></title>
  
  

  
  
		
   
   <style 
   
   type=
   
   "text/css"
   
   >
  
  

  
  
			
   
   canvas
   
   {
  
  

  
  
				
   
   left
   
   : 
   
   50
   
   %
   
   ; 
   
   position
   
   :
   
   relative
   
   ; 
   
   margin-left
   
   : 
   
   -200px
   
   ; 
   
   top
   
   ;
  
  

  
  
			
   
   }
  
  

  
  
		
   
   </style>
  
  

  
  
	
   
   </head>
  
  

  
  
	
   
   <body>
  
  

  
  
		
   
   <canvas 
   
   id=
   
   "drawDiagonal" 
   
   width=
   
   "400" 
   
   height=
   
   "500" 
   
   style=
   
   "border: 1px solid #008B8B;"
   
   ></canvas>
  
  

  
  
	
   
   </body>
  
  

  
  
	
   
   <script 
   
   type=
   
   "text/javascript"
   
   >
  
  

  
  
		
   
   var 
   
   canvas
   
   =
   
   document
   
   .
   
   getElementById
   
   (
   
   'drawDiagonal'
   
   );
  
  

  
  
		
   
   var 
   
   cd
   
   =
   
   canvas
   
   .
   
   getContext
   
   (
   
   '2d'
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   save
   
   ();
  
  

  
  
		
   
   cd
   
   .
   
   translate
   
   (
   
   -
   
   10
   
   ,
   
   350
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   beginPath
   
   ();
  
  

  
  
		
   
   cd
   
   .
   
   moveTo
   
   (
   
   0
   
   ,
   
   0
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   quadraticCurveTo
   
   (
   
   170
   
   ,
   
   -
   
   80
   
   ,
   
   260
   
   ,
   
   -
   
   190
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   quadraticCurveTo
   
   (
   
   310
   
   ,
   
   -
   
   250
   
   ,
   
   410
   
   ,
   
   -
   
   250
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   strokeStyle
   
   =
   
   '#663300'
   
   ;
  
  

  
  
		
   
   cd
   
   .
   
   lineWidth
   
   =
   
   50
   
   ;
  
  

  
  
		
   
   cd
   
   .
   
   stroke
   
   ();
  
  

  
  
		
   
   cd
   
   .
   
   restore
   
   ();
  
  

  
  
		
  
  

  
  
		
   
   var 
   
   lg 
   
   = 
   
   cd
   
   .
   
   createLinearGradient
   
   (
   
   80
   
   ,
   
   220
   
   ,
   
   240
   
   , 
   
   200
   
   ); 
   
   //可以尝试改变这里的参数，改变不同的效果；     
  
  

  
  
        
   
   lg
   
   .
   
   addColorStop
   
   (
   
   0
   
   , 
   
   'yellow'
   
   );      
  
  

  
  
        
   
   lg
   
   .
   
   addColorStop
   
   (
   
   0.9
   
   , 
   
   '#3CB371'
   
   ); 
  
  

  
  
        
   
   lg
   
   .
   
   addColorStop
   
   (
   
   1
   
   ,
   
   '#2E8B57'
   
   );
  
  

  
  
        
   
   cd
   
   .
   
   fillStyle
   
   =
   
   lg
   
   ;
   
   //把设置好的颜色值附给cd
  
  

  
  
        
  
  

  
  
        
   
   cd
   
   .
   
   strokeStyle 
   
   =
   
   'yellowgreen'
   
   ;
  
  

  
  
		
   
   cd
   
   .
   
   lineWidth
   
   =
   
   4
   
   ;
  
  

  
  
		
   
   cd
   
   .
   
   lineJoin
   
   =
   
   'round'
  
  

  
  
		
   
   cd
   
   .
   
   beginPath
   
   ();
  
  

  
  
		
   
   cd
   
   .
   
   moveTo
   
   (
   
   200
   
   ,
   
   40
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   160
   
   ,
   
   100
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   185
   
   ,
   
   100
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   145
   
   ,
   
   160
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   170
   
   ,
   
   160
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   135
   
   ,
   
   220
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   180
   
   ,
   
   220
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   170
   
   ,
   
   320
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   235
   
   ,
   
   320
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   220
   
   ,
   
   220
   
   )
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   260
   
   ,
   
   220
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   225
   
   ,
   
   160
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   250
   
   ,
   
   160
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   210
   
   ,
   
   100
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   lineTo
   
   (
   
   235
   
   ,
   
   100
   
   );
  
  

  
  
		
   
   cd
   
   .
   
   closePath
   
   ();
  
  

  
  
		
   
   cd
   
   .
   
   fill
   
   ();
  
  

  
  
		
   
   cd
   
   .
   
   stroke
   
   ();
  
  

  
  
	
   
   </script>
  
  

  
  

   
   </html>


其效果如下图所示：


大家试图去尝试一下！哪里有不明白的地方可以相互交流.

navysir8
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5渐变的两种方式,HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient...
weixin_42099151的博客
06-27 1852
今天又再看了html5的颜色渐变API，发现没有第一次看那么复杂。不过我对这个颜色渐变存在着一个疑惑就是两种色带之间，那段是属于两种颜色混合的，有点模糊。比如从红色变成黄色，在红与黄之间的那个地方，不会是纯色的红和黄，我一开始不是很明白，现在我是理解的：渐变颜色嘛，字面上的意思，就是渐变，在这两种颜色之间，由一种颜色渐变过渡到另一种颜色。一、创建渐变颜色对象的步骤蛮简单的，线性渐变比径向渐变少了两...
CSS3 渐变
苦涩
05-29 187
线性渐变 渐变分成线性渐变和径向渐变两种 线性渐变的两大要素 渐变方向，结束方向；默认从上向下 渐变的起始色和终止色，至少两种；可以使用合法的颜色值 线性渐变语法：background: linear-gradient(to bottom, red, blue); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</titl.
渐变
weixin_43339334的博客
06-03 744
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果 ！！渐变是图片，需要通过background-image来设置 线性渐变，颜色沿着一条直线发生变化 linear-gradient() linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域 - 线性渐变的开头，我们可以指定一个渐变的方向
html颜色怎么渐变效果,html怎么设置颜色渐变
weixin_39727706的博客
06-04 7544
html设置颜色渐变的方法：首先创建一个HTML示例文件；然后使用div标签创建一个模块；接着在css标签内通过“id(colorchange)”来设置div样式；最后通过linear-gradient属性设置div的背景颜色渐变效果即可。本文操作环境：Windows7系统、Dell G3电脑、HTML5&&CSS3版。新建一个html文件，命名为test.html，用于讲解css...
前端开发_HTML5_CSS部分-渐变
u013185175的博客
12-18 1710
渐变 1.引入 上一小节课程我们说到了阴影，这一节课我们讲解一下一种比较特殊的效果:渐变 2.渐变概述 渐变背景是一种网页中比较特殊的视觉元素，一直以来都是通过设置背景图片来实现渐变的，但是随着W3C组织将渐变的效果设置收入到CSS3标准中之后，就可以通过样式设计出渐变的效果，这样一来就加快的网页的相应速度。 3.渐变的种类:线性渐变和径向渐变 4.线性渐变 (1)、线性渐变概述:线性渐变是指指向一个方向的渐变，需要一个起始点和一个方向的渐变效果。 (2)、线性渐变相关语...
Hbuilder 下载与安装教程
热门推荐
梁辰兴的博客
03-08 1万+
Builder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。
css3渐变
liguoyuan819的博客
04-12 169
css3提供了两种渐变方式： 线性渐变（向下/向上/向右/向左/对角/任意角度方向） 径向渐变（由中心定义） 用background-image属性来控制渐变 1.线性渐变 为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。若不指定渐变方向，则默认从上到下 语法： background-image: linear-gradient(direction, color1, color2, ...); 从上到下
HTML5 Canvas彩色渐变背景动画效果
06-11
这款基于HTML5 Canvas的彩色渐变背景动画效果，是利用Canvas API来实现的一种互动性极强的视觉特效。当鼠标在画布上移动时，背景颜色会随着鼠标的移动而产生渐变变化，为用户提供了生动且引人入胜的交互体验。 首先...
html5教程实现Photoshop渐变色效果
09-28
在本教程中，我们将探讨如何利用HTML5的Canvas API来实现类似Photoshop的渐变色效果。 Canvas是HTML5提供的一个非常强大的图形绘制工具，它允许开发者通过JavaScript来动态地绘制图形、动画以及处理图像。在这个...
HTML5实现颜色渐变3D文字特效源码.zip
11-04
在本资源"HTML5实现颜色渐变3D文字特效源码.zip"中，我们可以深入探讨HTML5如何实现色彩渐变和3D效果在文字上的应用。 1. **CSS3渐变效果**：在HTML5中，实现颜色渐变主要依赖于CSS3的渐变功能。有两种主要类型的...
HTML5交互式渐变背景动画特效
06-24
本项目“HTML5交互式渐变背景动画特效”就是利用HTML5的Canvas元素来实现一种新颖的视觉效果，使得网页背景能够随着鼠标的移动而产生动态的渐变动画。 Canvas是HTML5中的一个核心特性，它提供了一个二维绘图环境，...
HBuilderX安装入门教程(非常详细)，从零基础入门到精通，看完这一篇就够了（附安装包）
最新发布
Karka_的博客
08-19 6559
HBuilder X是一款为前端量身订制的多功能代码编辑器，它有飞一样的编码、最完整的语法库和浏览器兼容数据、能够方便制作手机APP，还有保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。
html中渐变怎么写,如何创建渐变 (HTML)
weixin_42230607的博客
06-03 1613
如何创建渐变 (HTML)03/04/2016本文内容[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]形状和线条并不是只能为纯色。用在画布中的渐变实际上是一种类型的颜色值，因此，你可以将它应用于 fillStyle 和 strokeStyle 属性。渐变可用...
HTML渐变色
qq_59080175的博客
06-28 9139
在元素background属性里加入“background-image: radial-gradient（起始位置，形状，大小，颜色，颜色，颜色）”
html5 渐变色的方法
focus_language的博客
05-19 2706
createLinearGradient(x,y,x1,y1) 线性的渐变色：x，y渐变开始的坐标  x1,x2渐变结束的坐标 create Object createRadialGradient(x1, y1, r1, x2, y2, r2); 创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。 渐变对象创建完成之
HTML5 渐变和图案
歪脖先生的博客
04-24 2873
渐变和图案 除了CCS颜色外，Canvas还支持渐变（CanvasGradient）和图案（CanvasPattern）。把strokeStyle和fillStyle属性设置为渐变或图案，就可以实现多样化的绘制效果。 渐变 在Canvas中，CanvasGradient对象表示一个颜色渐变。将画笔上下文对象的fillStyle或strokeStyle属性设置为一个CanvasGr
HTML5实现彩色渐变字
要疯了的博客
05-27 1万+
方法一：利用CSS中的-webkit-gradient背景渐变属性实现，-webkit-gradient是background的一个属性值，webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [...
html5 颜色渐变
anchenyanyue的专栏
10-21 5944
Your browser does not support the canvas element. var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"
html5的颜色的渐变的问题
milijiangjun的博客
07-16 3925
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;底部菜单颜色渐变&lt;/title&gt; &lt;style type="text/css"&gt; *{margin: 0p
html 边框颜色渐变代码实现
06-01
HTML中实现边框颜色渐变可以通过CSS的linear-gradient函数来实现。以下是一个示例代码： ```html .gradient-border { border: 3px solid; border-image: linear-gradient(to right, #4cb8c4, #3cd3ad, #4cb8c4)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值