• HTML5学习笔记(2)——canvas渐变


      HTML4中绘制一个渐变图形并不是一件很容易的事情,往往需要通过大量的JS代码来实现,或者我们会做一张渐变图片通过平铺的方式在实现渐变。前者需要写大量的JS代码,而后者会降低网页的加载速度,那么我们有没有一种更好地方式来实现网页渐变的效果呢?在HTML4中,我们似乎找不到更好的方法了。

      但是,在HTML5中的canvas属性却为我们提供了很好的解决方案,利用canvas在Javascript中一些接口,我们可以很轻易的做出我们想要的渐变效果。

      在HTML5中主要有两种渐变方式,一种是沿着直线的渐变方式,我们称之为线性渐变;另一种是从一个点或圆沿着一个圆的半径向四周渐变的方式,我们称之为径向渐变。

      下面分别来介绍这两种的渐变方式。

      1.线性渐变

      在HTML5中,有关于线性渐变的最主要的函数是createLinearGradient(x0,y0,x1,y1) ;

      createLinearGradient(x0,y0,x1,y1)    创建一个沿直线从(x0,y0)到(x1,y1)进行渐变

      我们可以利用createLinearGradient来创建一个线性渐变,我们来指定这个渐变的宽度为400像素,那么我们可以用如下的方式创建:

    var a_canvas = document.getElementById("a");    //获取canvas元素节点
    var context = a_canvas.getContext("2d"); //设置canvas元素节点
    var my_gradient = createLinearGradient(0,0,400,0); //创建一个线性渐变

      由于点(0,0)到点(400,0)是从左到右的,所以我们创建的渐变也会沿水平从左到右。

      有了一个渐变对象之后,我们就需要定义渐变的颜色了,定义渐变的函数有addColor(per,color);

      addColor(per,color);   定义一个渐变颜色, per表示开始渐变位置占渐变区域大小的百分比,为0-1之间的任意值,color为颜色样式。

      那么接下来,我们定义两个渐变颜色,使得渐变区域从黄色到红色进行渐变,代码如下:

    my_gradient.addColorStop(0,"#ff0");    //定义黄色渐变色
    my_gradient.addColorStop(1,"#f00"); //定义红色渐变色

      定义完了以后,这些渐变信息都只是存在了内存当中,并没有在canvas中显示出来,要让渐变产生实际的效果,我们需要设置canvas内容的fillStyle为当前的渐变对象,并且绘制这个图形,比如一个矩形或者一条直线。所以,为了看到渐变效果,我们还需要以下代码:

    context.fillStyle = my_gradient;     //设置fillStyle为当前的渐变对象
    context.fillRect(0,0,400,300); //绘制渐变图形

      那么至此,一个线性渐变的图形便绘制出来了,在chrome中运行的结果如下:

      假如你想实现一个上下的线性渐变的效果,那么你应该在调用createLinearGradient(x0,y0,x1,y1) 创建渐变的时候保证点(x0,y0),点(x1,y1)连成的直线为竖直直线,也就是x0=x1。当然你也可以实现对角线渐变的效果,只要(x0,y0) (x1,y1)组成一条对角线就可以了。创建上下渐变和对角线渐变的代码如下:

    var my_gradient = context.createLinearGradient(0,0,0,300);    // 创建上下渐变
    var my_gradient = context.createLinearGradient(0,0,0,300); // 创建对角线渐变


      2.径向渐变

      在HTML5中,有关于线性渐变的最主要的函数是createRadiaGradient(x0,y0,r0,x1,y1,r1);

      createRadiaGradient(x0,y0,r0,x1,y1,r1)    创建一个沿两个圆之间的锥面绘制渐变。前三个参数代表一个圆心为(x0,y0)半径为r0的开始圆,后三个参数代表圆心为(x1,y1)半径为r1的结束圆。

      首先我们可以利用createLinearGradient来创建一个线性渐变,我们来指定这个渐变的宽度为400像素,那么我们可以用如下的方式创建:

    var b_canvas = document.getElementById("b");     //获取canvas元素节点
    context = b_canvas.getContext("2d"); //设置canvas元素节点
    //
    创建一个径向渐变,从圆心为(160,120)半径为20的圆周开始沿着半径向圆心为(160120)半径为200的圆周进行径向渐变
    my_gradient= context.createRadialGradient(160,120,20, 160,120,200);

      创建完了之后,和线性渐变一样,我们同样需要定义渐变颜色,这一点和线性渐变毫无区别,比如,我们分别定义红色渐变色和蓝色渐变色:

    my_gradient.addColorStop(0, "#f00");    //定义红色渐变色
    my_gradient.addColorStop(1, "#00f"); //定义蓝色渐变色

      同样地,定义完了以后,这些渐变信息都只是存在了内存当中,并没有在canvas中显示出来,要让渐变产生实际的效果,我们需要设置canvas内容的fillStyle为当前的渐变对象,并且绘制这个图形,比如一个矩形,代码如下:

    context.fillStyle = my_gradient;     //设置fillStyle为当前的渐变对象
    context.fillRect(0,0,400,300); //绘制渐变图形

      至此,一个径向渐变的图形便绘制出来了,在chrome中运行的结果如下:

      到此为止,HTML5当中的两种基本的渐变方式就给大家介绍完了。

      demo演示地址:http://xiaowu.shnow.cn/html5/note2/index.html


      后话:国内关于html5的技术文档真的少的可怜,html5在中国的发展,离不开广大的技术爱好者的支持,另外给出一份我个人觉得不错的html5技术文档,这份文档来自what官方网站,全面系统的介绍了html5的标准 http://www.whatwg.org/specs/web-apps/current-work/multipage/

  • 相关阅读:
    Undefined symbols for architecture armv7: "CreateRSADataVerifier(NSString*)", referenced from:
    iOS 多线程研究11
    iOS 多线程研究
    iOS 中谓词的使用 NSPredicate
    ios 进程间通信
    GCD Block最简单的用法
    tabbar 获得对应的视图对象的方法
    网络请求
    iOS手势 规避同一界面上不同子界面同时响应多个手势
    20171107 几天考试总结
  • 原文地址:https://www.cnblogs.com/pgg200/p/2188322.html
Copyright © 2020-2023  润新知