那么第一种渐变方式就是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 &lt;canvas&gt; 基础学习

    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特性&amp;&amp;canvas

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

随机推荐

  1. Web之路笔记之三 - 使用Floating实现双栏样式

    2014秋季学期Web2.0课程实验 <Lab2 - Journal> 1. 对CSS的BOX MODEL进行亲密接触,理解他的用途. 2. 在float图片的时候,发现此时图片脱离了原来 ...

  2. 为什么在ucos向stm32f103移植时说os_cpu_c.c中有三个函数如OS_CPU_SysTickInit()需要注释掉

    我在看os_cpu_c.c代码时对下面这段话困惑了半天总是在百度的帮助下找到了答案 /*  申明几个函数,这里要注意最后三个函数需要注释掉,为什么呢?    OS_CPU_SysTickHandler ...

  3. apache 指定的网络名不再可用 原因及解决方法

    1.出现问题状况: 出现问题网站:http://www.ayyzz.cn/ 前段时间作文大全网出现有时候比较慢,有时候“找不到网页”404错误:另外在error.log里也报错: [Mon May 0 ...

  4. Request.Form()的使用

    在CS文件中获得对应页面中的下拉框DropDownList_sitebranch值可以有以下几种方法获得:         siteInfo.FZJGID = DropDownList_sitebra ...

  5. 【原】结构体包含CString类型成员变量出错的原理

    问题如下:我定义了如下的一个结构体: typedef struct{   CString csText;}MyStruct; 并有如下的程序段1:MyStruct * p=NULL;p=(MyStru ...

  6. HDU 5945 维护一个单调队列 dp

    Fxx and game Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Tot ...

  7. PLSQL_Oracle Table Lock表级锁的处理(案例)

    20150506 Created By BaoXinjian

  8. 全栈project师的毁与誉

    全栈(Full Stack)project师.也能够叫全端project师,不管是前端知识,还是后端架构你都要了解.甚至有些调皮的程序猿这样理解全栈project师:全栈project师 = 屌丝战斗 ...

  9. Java单例模式之最优解分析【为何说是最优解】

    代码如下 /** * * @ClassName: SingletionStaticInner * @Description: TODO[单例模式之最优解] * @author shundong.wu ...

  10. react component onClick 函数带参数

    <div onClick={this.toggleTip(true)}></div> toggleTip = shouldShowTip => () => { th ...