/**
* Created by xianrongbin on 2017/3/9.
*/ /* strokeStyle 或 fillStyle 属性的值*/ /**
* Demo1 创建线性渐变
*/ var dom = document.getElementById('clock'),
ctx = dom.getContext('2d'); var linearGrad=ctx.createLinearGradient(-,,,);//此时是斜型渐变 ,将最后参数变成0,则为 横向渐变 //CanvasGradient.prototype.addColorStop = function(offset,color) {};
linearGrad.addColorStop(0.0,'white');// offset 介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置
linearGrad.addColorStop(0.25,'green');
linearGrad.addColorStop(0.5,'blue');
linearGrad.addColorStop(0.75,'yellow');
linearGrad.addColorStop(0.8,'#Efff12'); ctx.fillStyle=linearGrad;
ctx.fillRect(,,,); /**
* Demo2 创建径向渐变
*/ var dom1 = document.getElementById('canvasItem'),
ctx1 = dom1.getContext('2d'); /**
* 渐变的开始圆 x,y坐标,半径
* 渐变的结束圆
*/
var radialGrad=ctx1.createRadialGradient(,,,,,); radialGrad.addColorStop(0.25,'yellow');
radialGrad.addColorStop(0.5,'green');
radialGrad.addColorStop(0.75,'blue');
radialGrad.addColorStop(1.0,'red'); ctx1.fillStyle=radialGrad;
ctx1.fillRect(,,,);

canvas(四) Gradient- demo的更多相关文章

  1. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  2. canvas画箭头demo

    效果图: 代码: <!DOCTYPE html> <html> <title>canvas画箭头demo</title> <body> &l ...

  3. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  4. html 5 canvas 绘制太极demo

    一个练习canvas的小案例.其中若有小问题,欢迎大神拍砖……^_* 代码效果预览地址:http://code.w3ctech.com/detail/2500. <div class=" ...

  5. canvas小球 时间demo

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. node.js入门学习(四)--Demo图书的增删改查

    需求:图书的增删改查,图书数据保存在data.json文件中. 1.Demo结构: 2.首先下载安装node.js,配置环境变量:参考博客 3.项目初始化 1)创建项目根目录node-hello,进入 ...

  7. Spring AOP四种实现方式Demo详解与相关知识探究

    一.前言 在网络上看到一篇博客Spring实现AOP的4种方式,博主写的很通俗易懂,但排版实在抓狂,对于我这么一个对排版.代码格式有强迫症的人来说,实在是不能忍受~~~~(>_<)~~~~ ...

  8. 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

    HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...

  9. [原创] 改善 Firemonkey Canvas 几何绘图质量问题(移动平台)

    说明: Fiiremonkey 的跨平台能力,大家有目共睹(一码同介面跨四平台),唯独移动平台在几何绘图方面,质量始终不尽人意,我也曾试着去修正(如:修正曲线平滑问题),也曾找过第三方案(如:AggP ...

  10. 【HTML】canvas学习小结

    1. 绘制基本图形 -----上下文---------------------------------------------------------- canvas.getContext('2d') ...

随机推荐

  1. 用doxygen自动生成文档

    1. 添加符合doxygen解析规则的注释 (比如函数说明,函数参数/返回值说明) 用qt-creator可以在函数上方一行键入“/**”,然后直接回车,就可以自动生成默认的格式. 2. 安装doxy ...

  2. utf-8mb4和排序规则

    MySQL在5.5.3之后增加了这个utf8mb4的编码,mb4就是most bytes 4的意思,专门用来兼容四字节的unicode. 最新的 UTF-8 规范只使用一到四个字节,最大能编码21位, ...

  3. Python 解决: from pip import main ImportError: cannot import name 'main'

    此次报错是因为 pip 升级出的问题: from pip import mainif __name__ == '__main__': sys.exit(main()) 改为: from pip imp ...

  4. SQL SERVER 月、季、年统计与常用查询语句汇总

    一.SQL SERVER 月.季.年统计查询 --本天 SELECT *FROM dbo.TableName WHERE DATEDIFF(DAY,TimeField,getdate())= 0; - ...

  5. Property referenced in indexed property path is neither an array nor a List nor a Map

    记一次传参请求报错,没有解决 Invalid property 'distributeCars[0][ackStatus]' of bean class [com.api6.plate.prototy ...

  6. Python 算术运算符

    Python 算术运算符 运算结果为浮点数 除法:/ 整除: // 求余计算: % 求余运算可以用于固定时间的检测,比如说每10分钟进行一次什么样的操作,则:minute % 10 乘方运算:

  7. c++11 关于typelist的foreach

    建好一个typelist,其中都是类型信息而已,很重要的一个应用,循环迭代干些事情. 看了下boost的for_each实现,用我自己的typelist,大概代码如下: template<typ ...

  8. 黄聪:iOS $299刀企业证书申请的过程以及细节补充

    最近申请了iOS的 299刀企业证书,相关过程有些问题,分享出来,以便后来人参考.申请的过程我主要参考了别人以前的文章,链接如下: 1.https://developer.apple.com/cn/s ...

  9. ionic3安卓版release发布

    1.进入到项目根目录 keytool -genkey -v -keystore your-full-keystore-name.keystore -alias your-lias-name -keya ...

  10. windows环境python2.7安装MySQLdb

    我电脑是64位,并且安装python不是默认路径,使用pip和mysql-python的exe文件安装都失败了. 后在网上找到一种安装方法,记录下. 确保安装了wheel,我的2.7默认安装了 pip ...