效果:
http://hovertree.com/texiao/html5/canvas/1/

代码：

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html;charset=gbk" />

 <script type="text/javascript">

 function draw(){

 var ctx = document.getElementById('canvas').getContext('2d');

 for (var i=0;i<6;i++){

 for (var j=0;j<6;j++){

 ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';

 ctx.fillRect(j*25,i*25,25,25);

 }

 }

 }

 </script>

 <title>测试fillStyle - 何问起</title>

  <meta name="description" content="何问起,hovertree.com" /><meta name="keywords" content=" hovertree.com,何问起" />

 </head>

 <body onload="draw();" >

 <canvas id="canvas" width="400" height="300">

 </canvas>

 <a href="http://hovertree.com/h/bjaf/a064shrh.htm">何问起</a>

 </body>

 </html>

更多：http://www.cnblogs.com/roucheng/p/texiao.html

http://hovertree.com/texiao/html5/canvas/2/

如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。

fillStyle = color
strokeStyle = color

strokeStyle 是用于设置图形轮廓的颜色，而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。默认情况下，线条和填充颜色都是黑色(CSS 颜色值 #000000)。

下面的例子都表示同一种颜色。
// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange"; 
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

注意: 目前 Gecko 引擎并没有提供对所有的 CSS 3 颜色值的支持。例如，hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。

注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。

http://hovertree.com/texiao/html5/canvas/3/

Canvas填充样式fillStyle
说明
在本示例里，我会再度用两层for循环来绘制方格阵列，每个方格不同的颜色。结果如图，但实现所用的代码却没那么绚丽。我用了两个变量i和j 为每一个方格产生唯一的RGB色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变。你可以通过修改这些颜色通道的值来产生各种各样的色板。通过增加渐变的频率，你还可以绘制出类似 Photoshop 里面的那样的调色板。

HTML5填充颜色的fillStyle测试的更多相关文章

  1. HTML5 Canvas 颜色填充学习

    ---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...

  2. excel如何设置输入数字后单元格自动填充颜色

    在使用excel的过程中,有时需要在输入数字时,突出显示这些单元格,突出显示可以用有填充颜色的单元格来表示.为了实现这样的效果,需要借助excel的条件格式. 工具/原料 电脑 Excel 2010 ...

  3. Android 绘制一个Loading动画__向图片中缓慢填充颜色,从而形成动画效果

    需求:制作一个加载动画,向一个不规则图片图形中从从下到上依次填充颜色,形成动画效果. 效果如下:     代码如下: LoadingAnimatorView.java package cn.yw.li ...

  4. VBA对指定单元格填充颜色并且赋值

    使用VBA对指定的单元格赋值并填充颜色 ====================================================== 代码区域 ==================== ...

  5. 怎样将Excel包含某字符的单元格填充颜色

    在处理数据的时候,xmyanke想将Excel中包含某字符的单元格填充蓝色,比较容易看清,弄了好一阵子都没完成,最后试用条件格式处理了一下,终于实现了. 比如要将A1到A12区间包含数字1的单元格填充 ...

  6. Excel的单元格设置下拉选项并填充颜色

    如何在Excel的单元格中加入下拉选项   方法/步骤     第一步:打开excel文档,选中需加入下拉选项的单元格.      第二步:点击菜单中的“数据”->“数据有效性”->“数据 ...

  7. android给View设置边框 填充颜色 弧度

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  8. WinForm画网格并填充颜色

    因为研究CodeCombat上的最后一题,自己尝试分解题目,然后想到需要画网格,还有最优化的方法 源代码如下 using System; using System.Collections.Generi ...

  9. Android学习——Button填充颜色及实现圆角

    在drawable下新建文件夹bt_shape.xml,如下: <?xml version="1.0" encoding="utf-8"?> < ...

随机推荐

  1. Reactive Extensions(Rx) 学习

    Bruce Eckel(著有多部编程书籍)和Jonas Boner(Akka的缔造者和Typesafe的CTO)发表了“反应性宣言”,在其中尝试着定义什么是反应性应用. 这样的应用应该能够: 对事件做 ...

  2. 从Facebook跑来阿里的赵海平大叔，你要干啥？

    赵海平在今年三月份来到阿里,听毕玄(他现任主管)说去年五六月份就跟赵海平聊上了.有人问:为啥 BAT 三大巨头,你看中了阿里巴巴?在今天现场达一千多人的分享中赵海平给出了回复:“因为百度和腾讯没找我呗 ...

  3. 给公司部门设计的SOA架构

    新来老大年前开会说各位同学,公司业务越来越重,未来几年要成倍增长......,要梳理出一套新架构,才能更好的支持N万用户.....,以后升职加薪当上....打败..... 想想还有点小激动呢,于是过年 ...

  4. CSS3 Animation制作飘动的浮云和星星效果

    带平行视差效果的星星 先看效果: 如果下方未出现效果也可前往这里查看 http://sandbox.runjs.cn/show/0lz3sl9y 下面我们利用CSS3的animation写出这样的动画 ...

  5. EDM制作要点

    EDM是Email Direct Marketing的缩写,虽然也是html,但是和我们在网页上使用的html不同,因为安全原因,各大邮箱服务商级邮件客户端都会对邮件内容进行一定程度上的处理,不会按照 ...

  6. LeetCode Note 1st,practice makes perfect

    1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to a ...

  7. 使用Java纯代码实现MySQL的连接

      建立数据库 1. 点击连接-->MySQL: 输入连接名 . 主机名/IP地址 .端口 .用户名.密码(没有密码就省略),然后点击确定,建立的表格是灰色表示关闭状态,双击开启 2. 重新创建 ...

  8. 设置Distribution clean up 每次删除Command的数量

    Replication Job “Distribution clean up: distribution” 默认设置是,每10minutes运行一次,每次删除2000个Command.这对于有1.9亿 ...

  9. 让低版本的 Android 项目显示出 Material 风格的点击效果

    每天都被不同的需求纠缠的生活是幸福而又不幸的,这不我们家亲爱的设计师们又让我们在低版本的 Android 平台上实现一下类似于 Material Design 的点击效果. 虽然大家都知道 Mater ...

  10. 为什么DOM操作很慢

    转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来 ...