大佬教程收集整理的这篇文章主要介绍了HTML5渐变实现，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Context对象可以通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象，这两个方法的原型如下：
Object createLinearGradient(x1,y1,x2,y2);
创建一个从(x1,y1)点到(x2,y2)点的线性渐变对象。
Object createRadialGradient(x1,r1,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>
<style
type=
"text/css"
>
canvas
{
@H_801_75@
left
:
50
%
;
position
:
relative
;
@H_38_76@margin-left
:
-200px
;
top
;
其效果如下图所示：
大家试图去尝试一下！哪里有不明白的地方可以相互交流.
以上是大佬教程为你收集整理的HTML5渐变实现全部内容，希望文章能够帮你解决HTML5渐变实现所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。