<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style></head><body><div><canvas id = "canvas" width = "800px" height = "800px"></canvas></div> <script type = "text/javascript" >
window.onload=function(){
var context = document.getElementById('canvas').getContext('2d')
/* fillStyle 镜像渐变
第一步：
var radialGradient = context.createRadialGradient(300,300,0,300,300,50);
参数1：第一个圆圆心的x坐标
参数2：第一个圆圆心的y坐标
参数3：第一个圆的半径

参数4：第二个圆圆心的x坐标
参数5：第二个圆圆心的y坐标
参数6：第二个圆的半径
第二步：
linearGradient.addColorStop(0,'#fff');
linearGradient.addColorStop(0.25,'yellow');
linearGradient.addColorStop(0.50,'green');
linearGradient.addColorStop(0.60,'red');
参数1：位置的百分比
参数2：渐变的颜色
第三步：
context.fillStyle = linearGradient;
context.fillRect(0,0,800,800);
*/
var radialGradient = context.createRadialGradient(400,400,100,400,400,500);
radialGradient.addColorStop(0,'#fff');
radialGradient.addColorStop(0.25,'yellow');
radialGradient.addColorStop(0.50,'green');
radialGradient.addColorStop(0.60,'red');
radialGradient.addColorStop(0.75,'blue');
radialGradient.addColorStop(1.0,'black');
context.fillStyle = radialGradient;
context.fillRect(0,0,800,800);
}
</script> </body> </html>

fillStyle径向渐变的更多相关文章

  1. HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. canvas径向渐变详解

    创建径向渐变步骤如下: 1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆 ...

  3. Canvas使用渐变之-径向渐变详解

    创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...

  4. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  5. html5 canvas 圆形径向渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. html5 canvas 径向渐变2

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. html5 canvas 径向渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 使用canvas来完成线性渐变和径向渐变的功能

    fillStyle的第二种使用情况就是渐变色的填充.渐变色就分为线性渐变色和径向渐变色.   线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数.   第一步 : 使用一个新的函数cre ...

  9. CSS3：radial-gradient，径向渐变的使用方法

    语法 径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变.其语法如下: background: radial-gradient(cen ...

随机推荐

  1. C语言 第六章 多重循环练习

    一.循环输入 #include "stdio.h" void main() { char c; do { printf("我告诉你1+1=2\n"); prin ...

  2. hibernate笔记--使用注解(annotation)方式配置单(双)向多对一的映射关系

    前面几篇都是介绍的用配置文件来实现实体类到数据库表的映射,这种方式是比较麻烦的,每一个pojo类都需要写一个相应的*.hbm.xml,无疑增加了很多代码量,不过也有优点就是利于维护,为了方便开发,Hi ...

  3. 关于SSMS显示select出来的数据行的疑问

    调试存储过程时,往往可以用print将存储过程中的变量print出来, 但是print出来的字符串有一定长度限制,刚才专门试了一下,应该是4000个字符 如果超过4000个字符,超长的字符会被自动截断 ...

  4. 无法将类型为“Microsoft.Office.Interop.Word.ApplicationClass”的 COM 对象强制转换为接口类型“Microsoft.Office.Interop.Word._Application”。

    无法将类型为“Microsoft.Office.Interop.Word.ApplicationClass”的 COM 对象强制转换为接口类型“Microsoft.Office.Interop.Wor ...

  5. 代码的坏味道（2）——过大的类(Large Class)

    坏味道--过大的类(Large Class) 特征 一个类含有过多字段.函数.代码行. 问题原因 类通常一开始很小,但是随着程序的增长而逐渐膨胀. 类似于过长函数,程序员通常觉得在一个现存类中添加新特 ...

  6. 一步一步开发Game服务器（二）登陆2

    上一篇文章,讲解了简单的登陆情况.接下来我们继续讲解登陆模块. 在正常的游戏服务器情况下.在尚未登录前可以查看服务器大区情况,登陆后也可以查看服务器大区情况,然后选择大区服务器.进行登录操作. 这样的 ...

  7. SQL Server 2014里的性能提升

    在这篇文章里我想小结下SQL Server 2014引入各种惊艳性能提升!! 缓存池扩展(Buffer Pool Extensions) 缓存池扩展的想法非常简单:把页文件存储在非常快的存储上,例如S ...

  8. 在Pycharm中使用GitHub

    Pycharm是当前进行python开发,尤其是Django开发最好的IDE.GitHub是程序员的圣地,几乎人人都在用. 本文假设你对pycharm和github都有一定的了解,并且希望在pycha ...

  9. MVC学习系列11---验证系列之客户端验证

    前面学习了,服务端验证,这篇文章中,我们接着学习客户端验证,客户端的验证,使用Jquery和Jquery插件来实现[jquery.validate.min.js and jquery.validate ...

  10. C#中实现对象间的更新操作

    最近工作的时候遇到一个问题,根据Web端接收到的对象obj1,更新对应的对象值ogj2.先判断obj1中属性值是否为null, 若不等于null,则更新obj2中对应属性值:若等于null,则保持ob ...