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. python基础(七)函数

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 函数最重要的目的是方便我们重复使用相同的一段程序. 将一些操作隶属于一个函数,以后 ...

  2. WSTMall网站系统最新官方版

    WSTMall V1.0是在thinkphp 的经典版本3.2.2基础上进行优化开发的, TP 3.2.2不是thinkphp的一个最新的版本,却是thinkphp最金典的一个版本,正所谓站在巨人的肩 ...

  3. FeWeb基础之HTML

    FeWeb基础之HTML 1.HTML简介 HTML是一种超文本标记语言,它的文件扩展名为.html,它的所有部分都是由标记<...>和标记</...>包括起来. 在一个HTM ...

  4. Oracle 增删改查

    Oracle入门案例: 1.创建实体类Student 并重写ToString方法 package cn.happy.entity; public class Student { public Inte ...

  5. HIbernate二级缓存

    一.定义: 二级缓存是进程或集群范围内的缓存,可以被所有的Session共享,是可配置的插件 二.二级缓存原理图 解析:每次从二级缓存中取出的对象,都是一个新的对象. 三.配置步骤如下: 同理:以员工 ...

  6. bootstrap 组件

      bootstrap  组件 1下拉菜单(dropdown)  下拉菜单切换(dropdown-toggle)  下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...

  7. JS文件加载：比较async和DOM Script

    async与script动态加载都能使文件异步加载,本文叙述它们对页面渲染和load加载的影响方面. 目前我用demo.js作为执行文件操作.代码: var now = function() { re ...

  8. 随堂软工团队小测——git协同

    No Bug 031402401鲍亮 031402402曹鑫杰 031402403常松 031402412林淋 031402418汪培侨 031402426许秋鑫 功能模块划分 方法 功能 main( ...

  9. 如何在Mac OS X上安装 Ruby运行环境

    对于新入门的开发者,如何安装 Ruby和Ruby Gems 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发环境.此安装方法同样适用于产品环境! 系统需求 首先确定操 ...

  10. MFC的多线程操作

    记得用MFC做了一个图像自动修复软件,当时没有多线程操作这一概念,由于图像修复算法比较复杂,因此,当执行图像修复时,程序就像卡死了似得而不能做其他操作.其实MFC对这种情况有一种很好地解决方案,那就是 ...