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. 烂泥：haproxy与nginx、zabbix集成

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb. 昨天介绍了haproxy的手机匹配规则,今天再来介绍下haproxy与nginx.za ...

  2. Linux基础命令操作

    显示日期与时间:date date +%Y/%m/%d date +%H:%M 显示日历:cal 显示一整年(cal 2009) 显示一年中的某一个月 (cal [[month]] year) 例如 ...

  3. java中System.getenv和System.getProperties的区别

    System.getenv获取的是系统的环境变量(就是用户在操作系统中设置的环境变量),windows和linux下环境变量的设置就不说了哦. System.getProperties获取的是系统的相 ...

  4. Netruon 理解（12）：使用 Linux bridge 将 Linux network namespace 连接外网

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  5. java设计模式之中介者模式

    中介者模式 用一个中介对象来封装一系列的对象交互.中介者使各个对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 中介者模式UML图 中介者模式代码 package com ...

  6. 基于Fast Bilateral Filtering 算法的 High-Dynamic Range(HDR) 图像显示技术。

    一.引言 本人初次接触HDR方面的知识,有描述不正确的地方烦请见谅. 为方便文章描述,引用部分百度中的文章对HDR图像进行简单的描述. 高动态范围图像(High-Dynamic Range,简称HDR ...

  7. 如何用ZBrush快速绘制身体

    Fisker老师用了5节课详细讲解了僵尸的头部制作过程,用了大量时间完善细节部分,在ZBrush3D图形绘制软件中雕刻模型就是这样,需要反复调整与修改,每一个细节都做到极致才是最理想的状态.头部雕刻好 ...

  8. 第3章 窗口与消息_3.1Windows编程模型

    第3章窗口与消息 3.1 Windows_编程模型 (1)窗口程序的运行过程   ①设计窗口   ②注册窗口类(RegisterClassEx).在注册之前,要先填写RegisterClassEx的参 ...

  9. （原创）JAVA多线程三锁

    前两章介绍了锁,那么现在我们介绍新的一个类,锁 一,简介 Lock是一个接口,实现它的类有读锁,写锁,和ReentrantLock,我们可以在类上点击ctrl+t来看看有哪些类实现了这个接口 使用方法 ...

  10. webapi相关知识

    1.从uri中获取参数 :后端:[FromUri] 2.从uri中获取数组参数:后端:[FromUri]string[] type  前端:type[]=1&type[]=2&type ...