那么第一种渐变方式就是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. Delphi调用webservice总结

    Delphi调用webservice总结     Delphi调用C#写的webservice 用delphi的THTTPRIO控件调用了c#写的webservice. 下面是我调试时遇到的一些问题: ...

  2. Delphi 弹出Windows风格的选择文件夹对话框， 还可以新建文件夹

    Delphi 弹出Windows风格的选择文件夹对话框, 还可以新建文件夹     unit Unit2; interface uses  Windows, Messages, SysUtils, V ...

  3. Construct Binary Tree from Preorder and Inorder Traversal——LeetCode

    Given preorder and inorder traversal of a tree, construct the binary tree. 题目大意:给定一个二叉树的前序和中序序列,构建出这 ...

  4. UVaLive5031 Graph and Queries（时光倒流+名次树）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=20332 [思路] 时光倒流+名次树(rank tree). 所谓“ ...

  5. C++中delete和 delete[]的区别

    总的原则是,如果是用new[]创建的,则用delete[]删除,如果是用new创建的,则用delete删除. 对于基本类型,比如char *p=new char[20];如果删除时,delete p和 ...

  6. eclipse 导入项目时候java版本不一致问题

    最近导入一个java项目,发现我安装的java版本是1.8.0_111,而项目的版本是1.8.0_101,当然不想重新再安装旧的java版本,于是就在网上找了解决方法. 在项目的library中右击, ...

  7. SRM 507(2-1000pt)

    DIV2 1000pt 题意:在一个长度无限的数轴上移动一个方块,每次可以向左或者向右移动距离x,只要x为完全平方数.数轴上有一些坑,如果方块移动到坑上则方块会掉进坑中,不能再被移动.给整数s,e,和 ...

  8. hdu 4705 dfs统计更新节点信息

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4705 #pragma comment(linker, "/STACK:16777216&qu ...

  9. 【行业干货】ASOS：外来快时尚品牌的入华战 - 行业干货 - 京东内部论坛 - Powered by Discuz!

    [行业干货]ASOS:外来快时尚品牌的入华战 - 行业干货 - 京东内部论坛 - Powered by Discuz! [行业干货]ASOS:外来快时尚品牌的入华战

  10. 全面剖析XML和JSON

    1.定义介绍 (1).XML定义扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许 ...