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. 关于Thinkcmf中热门文章的使用

    今天在做一个首页新闻列表页面的功能时候,因为要读取大量的新闻内容列表.如果每条数据都要从数据按照文章id和term_id来对应取值,无疑是很痛苦的. 然而机智如我,发现cmf框架中热门文章的用法: 在 ...

  2. 部署私有Docker Registry和使用

    环境 vmware虚拟机 Ip:192.168.190.139 Ip:192.168.190.140 Ip:192.168.0.122 registry Docker 1.12.2 Docker 版本 ...

  3. Junit测试Controller（MockMVC使用），传输@RequestBody数据解决办法

    一.单元测试的目的 简单来说就是在我们增加或者改动一些代码以后对所有逻辑的一个检测,尤其是在我们后期修改后(不论是增加新功能,修改bug),都可以做到重新测试的工作.以减少我们在发布的时候出现更过甚至 ...

  4. 安装 Visual Studio Web Tools 的奇怪问题

    安装Microsoft ASP.NET 5 RC 1 时提示 0x80070005 - 拒绝访问 日志文件为 [1968:3F64][2015-11-20T10:08:36]i010: Launchi ...

  5. java 链表数据结构

    首先,单链表相对于队列的优势在于存储地址不是连续的,这样的意义在于,操作其中的某一个位置的元素时不需要对之前的其他元素都进行内存操作,大大的为我们的计算机减压了.下面直接进入正题: 先要定义一个结点类 ...

  6. HDU2089 不要62[数位DP]

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  7. 我离baidu.com有几跳

    一.背景 最近,读了网易游戏面试经验(三) - cotyb - 博客园之后,自己尝试着在windows下tracert了一下baidu.com,结果如下图一所示,发现从tracert的结果看,似乎一直 ...

  8. Linux常用命令（二）

    2.2.其他权限管理命令 命令名称:chown 功能:更改文件目录或文件的所有者语法:chown[用户][文件或目录]命令名称:chgrp 功能:改变文件或目录的所属组语法:chgrp[用户][文件或 ...

  9. Map接口，Map.Entry，hashMap类,TreeMap类，WeakHashMap。

    Collection接口之前接触过,每次保存的对象是一个对象,但是在map中保存的是一对对象,是以key->value形式保存的. 定义: public interface Map<K,V ...

  10. ReactNative新手学习之路03真机调试

    React Native新手入门03真机调试(iOS) 从设备访问开发服务器 在启用开发服务器的情况下,你可以快速的迭代修改应用,然后在设备上查看结果.这样做的前提是你的电脑和设备必须在同一个wifi ...