那么第一种渐变方式就是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. Codeforces Round #326 (Div. 1) - C. Duff in the Army 树上倍增算法

    题意:一个n个点的数, m个人住在其中的某些点上, 每个人的标号1-m, 询问u-v 路径上标号前a个人,并输出标号,a < 10. 作法, 利用倍增, ID[j][i] 表示i到i的第2^j个 ...

  2. 《University Calculus》-chaper13-多重积分-二重积分的引入

    这一章节我们开始对多重积分的研究. 在此之前,我们首先来回忆起积分的过程,在平面中,面临求解不规则图形的面积(常叫曲边梯形)的时候,我们可以采取建立直角坐标系,然后通过得到不规则图形边界的函数表达式f ...

  3. Binary Tree Preorder Traversal on LeetCode in Java

    二叉树的非递归前序遍历,大抵是很多人信手拈来.不屑一顾的题目罢.然而因为本人记性不好.基础太差的缘故,做这道题的时候居然自己琢磨出了一种解法,虽然谈不上创新,但简单一搜也未发现雷同,权且记录,希望于人 ...

  4. Parameterized tests

    Parameterized继承自Suite.Parameterized是在参数上实现了Suite,修饰一个测试类,然后提供多组构造函数的参数用于测试不同场景. import java.util.Arr ...

  5. Apache-Tika解析HTML文档

    通常在使用爬虫时,爬取到网上的文章都是各式各样的格式处理起来比较麻烦,这里我们使用Apache-Tika来处理HTML格式的文章,如下: package com.mengyao.tika.app; i ...

  6. [HDU 2049] 不容易系列之(4)——考新郎 （错排问题）

    不容易系列之(4)——考新郎 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2049 题目大意: 有N对新婚夫妇,其中所有的新娘站成一列,都盖上了红布. ...

  7. Unity3D 集成 Face++ FacePlusPlus httpClient http协议 byte数组转string

    //開始由于要实现跨平台.考虑过用curl封装c++的dll(android *.so)的方式,在c#Dllimport实现 //后来发现Unity3D本身支持http协议.且face++的api都是 ...

  8. Shiro Quartz之Junit測试Session管理

    Shiro的quartz主要API上提供了org.apache.shiro.session.mgt.quartz下session管理的两个类:QuartzSessionValidationJob和Qu ...

  9. 从Delphi 7升级到Delphi XE

    Delphi 7和XE中间有好几个版本号,可都不太流行,一是由于Delphi有些边缘化,二是7在XP环境下是近乎完美的版本号.市场上关于delphi的书越来越少,提供从7升级到XE介绍的资料差点儿没用 ...

  10. 百度地图api之如何自定义标注图标

    在百度地图api中,默认的地图图标是一个红色的椭圆形.但是在项目中常常要求我们建立自己的图标,类似于我的这个 操作很简单,分如下几步进行 步骤一:先ps一个图标,大小要合适,如果要背景透明的,记得保存 ...