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. vs配置boost库

    步骤: 1.在boost官网下载boost版本,以1.59.0为例. 2.解压,解压后可看到文件夹下有个bootstrap.bat文件. 注意: 如果有以下error: 'cl' 不是内部或外部命令, ...

  2. Start Instance 操作详解 - 每天5分钟玩转 OpenStack（31）

    本节通过日志文件详细分析 instance start 操作. 下面是 start instance 的流程图 向 nova-api 发送请求 nova-api 发送消息 nova-compute 执 ...

  3. shell九九乘法表

    #!/bin/bash ..}; do ..}; do if [ $x -ge $y ]; then echo -ne "$y*$x=$[$y*$x] \t" fi done ec ...

  4. 关于java中的MANIFEST.MF 文件内容

    打开Java的JAR文件我们经常可以看到文件中包含着一个META-INF目录, 这个目录下会有一些文件,其中必有一个MANIFEST.MF,这个文件描述了该Jar文件的很多信息.可以简化Java应用程 ...

  5. Centos6.5下设置静态IP

    1.编辑网卡配置文件 vi /etc/sysconfig/network-scripts/ifcfg-eth0 设置网卡eth0的IPV4信息,需要注意的是,设置的IPADDR需要和局域网中其他机器处 ...

  6. DBCP连接池简介

    DBCP连接池简介 1.数据库连接基础 数据库连接池基础主要包括以下三个方面的内容:数据库连接池的基本概念.数据库连接池的工作原理.Java开源的连接池.下面将从这三个方面一一介绍: (1)数据库连接 ...

  7. 【问题&解决】fonts/fontawesome-webfont.woff2 404 (Not Found)

    问题: 虽然网页正常显示和运行,但是有2个字体文件出现404错误.像笔者这种强迫症是接受不了的. 解决: 因为笔者的服务器是虚拟主机,只需要在主机控制器平台添加对应的MIME类型即可. 这样服务器就支 ...

  8. loadrnner添加C语言代码的几种方式

    今天有人在群里问,想直接把自己的C语言代码让lr调用,该怎么搞. 这东西说来简单,只是对Loadrunner这工具不熟悉可能才会有这种问题吧.个人理解,一般有三种方法吧,废话不多,直接干货. 1.直接 ...

  9. PAT 1037. 在霍格沃茨找零钱（20）

    如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 -- 就如海格告诉哈利的:"十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特(Knut)兑一个西可,很容易.& ...

  10. WPF MVVM 验证

    WPF MVVM(Caliburn.Micro) 数据验证 书接前文 前文中仅是WPF验证中的一种,我们暂且称之为View端的验证(因为其验证规是写在Xaml文件中的). 还有一种我们称之为Model ...