那么第一种渐变方式就是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操作EXCEL Word

    用DELPHI操作EXCEL 在DELPHI中显示EXCEL文件,可用以下简单代码做到.但要实用,则需进一步完善. var  Form1: TForm1;  EApp:variant;implemen ...

  2. Eclipse中处理图片引包问题

    在Eclipse中处理图片,需要引入两个包:import com.sun.image.codec.jpeg.JPEGCodec;import com.sun.image.codec.jpeg.JPEG ...

  3. HDOJ(HDU) 2212 DFS(阶乘相关、)

    Problem Description A DFS(digital factorial sum) number is found by summing the factorial of every d ...

  4. SRM 500(2-1000pt)

    DIV2 1000pt 题意:给定两个集合A和B,A = {b1*q1i | 0 <= i <= n1-1},B = {b2*q2i | 0 <= i <= n2-1},问将A ...

  5. ubuntu编译openwrt前端web界面

    openwrt是由Cisco放出源代码的开放无线路由平台.由于是基于linux内核,所以可以将很多linux平台下的软件移植到此平台下,然后让无线路由拥有很多意想不到的功能,例如拿来做BT下载器,音乐 ...

  6. segment

    1.segmentedControlStyle 设置segment的显示样式. typedef NS_ENUM(NSInteger, UISegmentedControlStyle) { UISegm ...

  7. java 编辑报错 非法字符: \ufeff 解决方案

    用Notepad ++ 调成utf-8 格式 bom 或无bom根据情况 新建类 把代码一句句粘进去 ok

  8. foxmail客户端总是提示接收密码错误

    如上图所示. 我知道的一个原因是 发送太多邮件所致,导致发件服务器触发规则限制登录. 如果之前发的不是很多的话,可以在设置的帐号选项里删除这个账户,再重新建一个.

  9. 安卓ListView操作的两种方法

    举例做一个微信的中间部分(好友消息等信息通知) 第一种:BaseAdapter() package com.example.wx; import java.util.ArrayList;import ...

  10. Oracle MERGE INTO的使用方法

    非常多时候我们会出现例如以下情境,假设一条数据在表中已经存在,对其做update,假设不存在,将新的数据插入.假设不使用Oracle提供的merge语法的话,可能先要上数据库select查询一下看是否 ...