1.绘制线性渐变

Canvas提供了用于创建线性渐变的函数createLinearGradient（x0,y0,x1,y1）,坐标点（x0,y0）是起点 ，（x1,y1）是终点

创建一个渐变色

var gradient=createLinearGradient(0,0,300,0);

定义渐变色颜色

ctx.addColorStop(stop,color);

ctx.addColorStop(0,"#f00");

ctx.addColorStop(1,"#00f");

设置Canvas内容的fillStyle为当前的渐变对象，并且绘制这个图形

 ctx.fillStyle=gradient;         //设置fillStyle为当前的渐变对象

 ctx.fillRect(0,0,400,300);      //绘制渐变图形

一个线性渐变的图形

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

    <canvas id="myCanvas"></canvas>

    <script type="text/javascript">

        var canvas=document.getElementById("myCanvas");

        if(canvas && canvas.getContext){

            var ctx=canvas.getContext("2d");

            var grad=ctx.createLinearGradient(0,0,300,0); //创建一个渐变色线性对象

            grad.addColorStop(0,"#f00");                  //定义渐变色颜色

            grad.addColorStop(1,"#00f");

            ctx.fillStyle=grad;                         //设置fillStyle为当前的渐变对象

            ctx.fillRect(0,0,300,100);                    //绘制渐变图形

        }

    </script>

 </body>

 </html>

显示：

2.绘制径向渐变：注意在绘制径向渐变时，可能会因为Canvas的宽度或者高度设置不合适，导致径向渐变显示不完全，需要考虑调整Canvas的尺寸

创建一个沿两个圆之间的锥面绘制渐变

 createRadialGradient(x0,y0,r0,x1,y1,r1);
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <canvas id="myCanvas" width="400px" height="300px"></canvas>

 <script type="text/javascript">

     var canvas=document.getElementById("myCanvas");

     if(canvas && canvas.getContext){

         var ctx=canvas.getContext("2d");

         var grad=ctx.createRadialGradient(200,200,50,200,200,200) //创建一个渐变色线性对象

         grad.addColorStop(0,"#f00");                  //定义渐变色颜色

         grad.addColorStop(1,"#00f");

         ctx.fillStyle=grad;                         //设置fillStyle为当前的渐变对象

         ctx.fillRect(0,0,400,400);                    //绘制渐变图形

     }

 </script>

 </body>

 </html>

显示

Canvas绘制渐变的更多相关文章

  1. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  2. Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  3. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  4. 使用Canvas绘制图形的基本教程

    原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  5. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  6. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  7. HTML5—canvas绘制图形（1）

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  8. canvas绘制太阳系

    原文地址:http://jeffzhong.space/2017/10/26/solar/ 学习canvas有一段时间了,顺便写个小项目练手,该项目用到的知识点包括: ES6面向对象 基本的三角函数 ...

  9. canvas绘制圆心扇形可组成颜色随机的七色小花

    啊~现在应该还是春天吧.心情一如既往的烦闷呐.最近做了一个canvas的扇形绘制的东西.把它整理出来变成一个适合春天的花朵绘制~沉闷的工作环境已经让我这种有趣的人也变成了无聊鬼怪呢.下次一定想找一个年 ...

随机推荐

  1. JS导出PDF插件（支持中文、图片使用路径）

    在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题.它的效果可以先到http://pdfmake.org/playgroun ...

  2. day1学习

    python 2 和 3 的区别 1.用户输入的命令:python 2 中是raw_input(""):python 3 中是input(""). 2.默认字符 ...

  3. php函数 ceil floor round和 intval

    1.ceil 如果有小数部分 则进一位 < ?php echo ceil(4.3); echo ceil(9.999); ?> 2.floor 舍小取整 < ? php echo f ...

  4. centos 7 install python spynner

    yum install python-devel yum install libXtst-devel pip install autopy pip install spynner import spy ...

  5. [WPF系列]-Layout

    DockPanel The nice thing about dock panels is they already fill all the available space. LastChildFi ...

  6. 【WPF系列】-TextBox常用知识点

    DataBinding中更新数据源的时机   TextBox .Text 属性的默认 UpdateSourceTrigger 值为 LostFocus.这意味着如果应用程序的 TextBox 包含数据 ...

  7. Jenkins学习九：Jenkins插件之构建MSBuild

    Jenkins是Java语言编写的,一直好奇是否可以构建NET语言的项目,目前只了解到有一个插件MSBuild支持构建NET项目. 一.Jenkins安装插件MSBuild 二.VS构建CsharpH ...

  8. Fast RCNN 训练自己的数据集（3训练和检测）

    转载请注明出处,楼燚(yì)航的blog,http://www.cnblogs.com/louyihang-loves-baiyan/ https://github.com/YihangLou/fas ...

  9. 全面剖析 <input> 标签 ------ HTML\HTML5

    <input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input> ...

  10. php导出EXCEL方法

    // 将数据表导出成 csv 格式文件并下载 // @param string $data:要导出的数据 // @param array $del:不导出的字段名,指定的字段数据不被导出 // @pa ...