canvas绘制渐变图形,使用canvas绘制渐变圆环
fillStyle的第二个用途是渐变填充。渐变分为线性渐变和径向渐变。
线性渐变：大致分为两步。这里，将使用两个新的画布函数。
第一步：使用一个新的函数createLinearGradient( xstart，ystart，xend，yend)；var linear grad=context . createlineargradient(x start，ystart，xend，yend)；
他有四个参数。他们是xstart，ystart，xend，yend，yend。它们形成两个坐标，这两个坐标形成一条线段。这条线段实际上是一条渐变线。渐变线用于定义渐变的方向和比例。
第二步：在这条渐变线的基础上添加colorStop。这个方法叫做addColorStop(停止，颜色)。他有两个参数：停止，颜色。第一个参数是一个浮点值，用于确定键颜色的位置。第二个参数用于确定键颜色的颜色。linearGrad.addColorStop(停止，颜色)；
当这两个步骤完成后，这个linearGrad变量就可以作为fillStyle传递给这个属性了。
看看代码：
！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge title linear gradient/title/headbydy canvas id= canvas style= border:1 px solid # AAA；显示：块；margin:0 auto /canvas/body/html script window . onload=function(){ var canvas=document . getelementbyid( canvas )；canvas.width=800canvas.height=600if(canvas . get context( 2d ){ var context=canvas . get context( 2d )；//获取上下文绘图环境varlineargrad=context . createlineargradient(0，0，800，600)；//渐变线起始坐标为(0，0)，结束坐标为(800，600)linear grad . addcolorstop(0.0， # 000 )；//第一个参数表示键颜色的位置。0表示起始位置，1表示结束位置，第二个参数表示键颜色的颜色。linearGrad.addColorStop(1.0， # fff )；context . fill style=linear grad；context.fillRect(0，0，800，600)；} else {alert(您的浏览器不支持canvas，请换个浏览器试试~ )} }/脚本渲染：
当我们创建了变量linearGrad后，我们可以添加ColorStop，还可以添加许多其他的变量。
例如：
代码：
var linear grad=context . createlineargradient(0，0，800，600)；//渐变线起始坐标为(0，0)，结束坐标为(800，600)linear grad . addcolorstop(0.0， # fff )；linearGrad.addColorStop(0.25， FB3 )；linearGrad.addColorStop(0.5， 690 )；linearGrad.addColorStop(0.75， # 09C )；linearGrad.addColorStop(1.0， # 000 )；效果图：
还有，我们定义的渐变线是倾斜的，也可以定义为水平或垂直。我们只需要修改渐变线的终点坐标。看代码，做一个水平渐变：
var linear grad=context . createlineargradient(0，0，800，0)；效果图：
垂直梯度：
var linear grad=context . createlineargradient(0，0，800，0)；效果图：
我们所做的，无论是水平倾斜还是垂直倾斜，都是贯穿整个画布的，那么如果我们的渐变线只赋给画布的一部分，会是什么效果呢？我们来修改一下。
var linear grad=context . createlineargradient(0，0，400，300)；效果图：
同样，我们创建的渐变线也可以超过这个画布的最大宽度和高度。我们来修改一下。
var linear grad=context . createlineargradient(-200，-100，1000，800)；效果图：
更何况我们画的填充形状也不一定要占满整个画布。我们可以随意调整自己定义的形状。这个填充的形状将在我们定义的渐变线上找到合适的填充颜色并填充它。例如：
var linear grad=context . createlineargradient(-200，-100，1000，800)；效果图：
径向梯度：与线性梯度不同，径向梯度被定义为径向梯度。这个径向梯度是在两个同心圆的基础上定义的。不同于在两点之间定义的线性渐变。
径向渐变也需要两步完成。
第一步：使用一个新的函数createaradialgradient(x0，y0，r0，x1，y1，R1)；他有六个参数。前三个参数定义第一个环的坐标和半径，后三个参数定义第二个环的坐标和半径。整个径向梯度出现在这两个圆之间。var radial grad=context . createradialgradient(x0，y0，r0，x1，y1，R1)；
第二步：和线性渐变一样，就不多介绍了。radialGrad.addColorStop(stop，color)；
该代码与具有线性梯度的代码非常相似。只是这里使用了createRadialGradient。我们将参数CreateRadialgradient (300，300，0，300，300，500)传递给他。前三个参数定义画布中心半径为0的点。最后三个参数在画布中心定义了一个半径为500的大圆。这定义了从一个点向外辐射的径向梯度。看代码。
！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge title radial gradient/title/headbydy canvas id= canvas style= border:1 px solid # AAA；显示：块；margin:0 auto /canvas/body/html script window . onload=function(){ var canvas=document . getelementbyid( canvas )；画布.宽度=600；canvas.height=600if(canvas . get context( 2d ){ var context=canvas . get context( 2d )；var radial grad=context . createradialgradient(300，300，0，300，300，500)；radialGrad.addColorStop(0.0， # fff )；radialGrad.addColorStop(0.25， # FB3 )；radialGrad.addColorStop(0.5， # 690 )；radialGrad.addColorStop(0.75， # 09C )；radialGrad.addColorStop(1.0， # 000 )；context . fill style=radial grad；context.fillRect(0，0，600，600)；} else {alert(您的浏览器不支持canvas，请换个浏览器试试~ )} }/脚本渲染：
你可以试着改变参数，看看会有什么不同的效果。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。