/**
* 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. 第3章 Java数组(上): 一维数组和二维数组

    3.数组及排序算法(2天) 3.1 数组的概述 2课时 3.2 一维数组的使用 3课时 3.3 多维数组的使用 3课时 3.4 数组中涉及到的常见算法 3课时 3.5 Arrays工具类的使用 3课时 ...

  2. Fabric的@runs_once的理解

    1:runs_once的用法,一直没理解,我看网上都是说:“函数修饰符,标识的函数只会执行一次,不受多台主机影响”     实在没理解,然后看了一下官方文档,这样解释     举个例子: #!/usr ...

  3. Visual Studio安装SVN插件

    VS的SVN插件 材料 VS安装程序. VisualSVN安装程序,点击下载.  VisualSVN-5.0.1 前期准备 在代码管理的服务器上安装SVN server,可参考svn安装部署以及服务器 ...

  4. 如何修改MSSQL的用户名

    Alter LOGIN sa DISABLE Alter LOGIN sa WITH NAME = [systemAccount] "systemAccount" 为SA的新名称, ...

  5. Kubernetes Kubelet安全认证连接Apiserver

    Kubelet使用安全认证连接Apiserver,可以用Token或证书连接.配置步骤如下. 1,生成Token命令 head -c /dev/urandom | od -An -t x | tr - ...

  6. 使用虚拟化KVM安装RHEL7系统

    使用虚拟化KVM安装RHEL7系统 作者:Eric 微信:loveoracle11g 检查真实物理机是否支持虚拟化功能 [root@server ~]# grep vmx /proc/cpuinfo ...

  7. 用kettle从mysql中使用存储过程读取数据写入到sqlserver数据库

    1.mysql存储过程,可以实现动态表读取,满足较为复杂的业务逻辑 DROP PROCEDURE if exists p_get_car_trace; delimiter // CREATE PROC ...

  8. 搭建Tomcat应用服务器、tomcat虚拟主机及Tomcat多实例部署

    一.环境准备 系统版本:CentOS release 6.6 (Final) x86_64 Tomcat版本:tomcat- JDK版本:jdk-8u25-linux-x64 关闭防火墙 软件包下载地 ...

  9. linux中 bashrc文件的alias添加快捷命令

    alias (为了简化命令操作,节省时间) 进入 /home下的用户,假设为 web 执行命令 ls -alh   找到 .bashrc 隐藏文件,如果没有则新建 通过  vi .bashrc  在里 ...

  10. Python字符串格式化 (%操作符)

    在许多编程语言中都包含有格式化字符串的功能,比如C和Fortran语言中的格式化输入输出.Python中内置有对字符串进行格式化的操作%. 模板 格式化字符串时,Python使用一个字符串作为模板.模 ...