那么第一种渐变方式就是LinearGradient，具体实施就是以下代码：

var colorStyle=context.createLinearGradient(0,0,0,HEIGHT);
colorStyle.addColorStop(0.0,"#000");
colorStyle.addColorStop(1.0,"#3300ff");
context.fillStyle=colorStyle;

上面这种属于线性渐变，还有一种径向渐变：

context.createRadialGradient(200,200,0,400,400,500);这六个属性分别代表第一个圆心x,y和r,还有第二个圆心的x,y,和r.

canvas 渐变的更多相关文章

  1. canvas渐变

    代码: 1 /** 2 * Created by Administrator on 2016/1/29. 3 */ 4 function draw(id){ 5 var canvas = docume ...

  2. Html5学习2（Html表格、Html列表、Html5新元素、Canvas （坐标、路径、画圆、文本、渐变、图像））

    Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...

  3. canvas插入图片设置背景，渐变

    ##在canvas中插入图片(需要image对象) 1.canvas操作图片时,必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 ima ...

  4. HTML5 <canvas> 基础学习

    HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...

  5. HTML5 Canvas | w3cschool菜鸟教程

    HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.. 在画布上(Canvas)画一个红色矩形,梯度矩形,彩色矩形,和一些彩色的文字. ...

  6. HTML5 新元素、HTML5 Canvas

    HTML5 新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,HT ...

  7. 关于H5的Canvas

    1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...

  8. HTML5 学习02——新元素:canvas

    HTML5 Canvas <canvas>标签:使用脚本 (通常是JavaScript)来绘制图形——默认情况下 <canvas> 元素没有边框和内容. 在画布上(Canvas ...

  9. HTML5特性&&canvas

    1.HTML5是由W3C(万维网联盟,专注于XHTML 2.0)和WHATWG(专注于web表单和应用程序)共同合作的结果,2014年10月完成标准制定! 主要设计目的:为了在移动设备上支持多媒体. ...

随机推荐

  1. 字符串（扩展KMP）：HDU 4333 Revolving Digits

    Revolving Digits Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  2. IIS7.0出错的解决方案 IIS 状态代码：IIS详细错误代码以及解释

    一.请求筛选模块被配置为拒绝包含双重转义序列的请求.HTTP 错误 404.11 - Not Found   1.单击 开始 . 在 开始搜索 框中, 键入 Notepad. 右击 记事本 , 然后单 ...

  3. 在ASP.Net MVC 中，如何在Global.asax中配置一个指向Area内部的默认Route

    ASP.Net MVC 中配置Route的时候可以设置一个默认的Route. 比如我要在输入http://localhost的时候默认进入http://localhost/home/index.可以在 ...

  4. Elasticsearch教程之基础概念

    基础概念 Elasticsearch有几个核心概念.从一开始理解这些概念会对整个学习过程有莫大的帮助. 1.接近实时(NRT)        Elasticsearch是一个接近实时的搜索平台.这意味 ...

  5. Java---类反射(2)---类反射加强

    经过前面的一篇博客,Java-类反射(1),相信大家对类反射有了一定的了解了. 下面来进行对类反射的加强,了解一下怎么通过类反射去new一个对象, 怎么通过类反射去访问其他类的方法. 怎么通过类反射去 ...

  6. Linux下p2p的聊天功能实现

    Linux下p2p的聊天功能实现细节 Do one thing at a time, and do well. 今天闲着没事,写一个P2P的点对点的聊天功能的小程序,我觉得对网络编程初学者的学习很有用 ...

  7. JS JQuery Ajax 跨域 Post Soap webservice

    呵呵 最近做一些HTML5的项目, 对于前段开发, 相信大家会碰到一个常见问题, 那就是Javascript跨域访问的问题. 话不多说 直接重点 当前网站和Webservice部署在同一个domain ...

  8. [转载]软件测试之Web测试经典总结

    转载自:软件测试之Web测试经典总结 基于Web的系统测试在基于Web的系统开发中,如果缺乏严格的过程,我们在开发.发布.实施和维护Web的过程中,可能就会碰到一些严重的问题,失败的可能性很大.而且, ...

  9. poj1023

    题目大意:有趣的数字系统 在一个k位的2的补码,,位的索引是从0到k-1位的,值是-2^(k-1),其他位置的i是2^i( (0 ≤ i < k-1) ),例如,3位的数字101是-2^2 + ...

  10. 遇到sql server的问题时如何排查

    The First Things I Look At On A SQL Server和Page2介绍了遇到sql server的问题时如何排查问题,Display Code列出了sql代码. 包括如下 ...