注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

Html5 Canvas (3)  

2011-03-30 23:25:32|  分类: Html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

颜色渐变

  Html5 Canvas (3) - zhenghaoju700 - zhenghaoju700 的博客?

CODE

<!DOCTYPE HTML>

<html>

<head>

<title>Html5 Canvas</title>

</head>

<body>

<canvas id="c" height="2000" width="1000"></canvas>

<script type="text/javascript">

var c = document.getElementById('c');//取得Dom元素

   var context = c.getContext("2d");//拿到Canvas的上下文 目前好像只支持2D渲染

   var y_gradient = context.createLinearGradient(0,100,0,300);//创建一个渐变色

   y_gradient.addColorStop(0,"white"); //开始

y_gradient.addColorStop(1,"blue"); //结束颜色

context.fillStyle = y_gradient; //用渐变色填充

context.fillRect(100,100,400,200);

 

var x_gradient = context.createLinearGradient(100,0,500,0);

  x_gradient.addColorStop(0,"white");

? x_gradient.addColorStop(1,"blue");

? context.fillStyle = x_gradient;

? context.fillRect(100,400,400,200);

 

? var xy_gradient = context.createLinearGradient(100,700,500,900);

 xy_gradient.addColorStop(0,"white");

 xy_gradient.addColorStop(1,"blue");

 context.fillStyle = xy_gradient;

context.fillRect(100,700,400,200);

</script>

</body>

</html>

 

颜色渐变API

gradient . addColorStop(offset, color) //添加渐变颜色offset 是0~1之间的数字 例如0.2

gradient = context . createLinearGradient(x0, y0, x1, y1) 线性渐变从 (x0,y0) --> (x1,y1)

gradient = context . createRadialGradient(x0, y0, r0, x1, y1, r1)两个圆之间的锥面渐变

 

再看个例子 多种颜色渐变

var m_gradient = context.createLinearGradient(100,1000,500,1200);

m_gradient.addColorStop(0,"white");

m_gradient.addColorStop(0.2,"blue");

m_gradient.addColorStop(0.4,"green");

m_gradient.addColorStop(0.6,"yellow");

m_gradient.addColorStop(0.8,"red");

m_gradient.addColorStop(1,"black");

context.fillStyle = m_gradient;

context.fillRect(100,1000,400,200);

  Html5 Canvas (3) - zhenghaoju700 - zhenghaoju700 的博客

?

  评论这张
 
阅读(143)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017