效果:
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. Event Store 2.0发布，带来了安全支持和测试版Projections库

    Event Store 2.0版本于上周发布,它带来了安全支持允许锁定Event Store和在事件流上设置访问控制列表.其主要新特性包括: HTTP和TCP之上的身份认证,包括账户管理 测试版Pro ...

  2. UWP图片编辑器（涂鸦、裁剪、合成）

    一.编辑器简介 写这个控件之前总想找一找开源的,可以偷下懒省点事.可是各种地方都搜遍了也没有找到. 于是,那就做第一个吃螃蟹的人吧! 控件主要有三个功能:涂鸦.裁剪.合成. 涂鸦:主要是用到了InkT ...

  3. Hadoop学习笔记—20.网站日志分析项目案例（三）统计分析

    网站日志分析项目案例(一)项目介绍:http://www.cnblogs.com/edisonchou/p/4449082.html 网站日志分析项目案例(二)数据清洗:http://www.cnbl ...

  4. Sharing A Powerful Tool For Calculate Code Lines

    最近正好需要统计下某项目代码行数,然后就找代码行数统计工具.以前找到过一个正则表达式,但是只有在VS2010下有用,VS2012和VS2013下的统计就不好使了. 接着搜索了一下代码行数统计绿色工具免 ...

  5. VMware Tools安装小结

    背景介绍:在VMware上装完ArchLinux后,窗口太小,操作不方便.查询后得知VMware Tools没有自动安装,需要手动安装. 官方安装说明:在 Linux 虚拟机中手动安装或升级 VMwa ...

  6. Yii2-多表关联的用法示例

    本篇博客是基于<活动记录(Active Record)>中对于AR表关联用法的介绍. 我会构造一个业务场景,主要是测试我比较存疑的各种表关联写法,而非再次介绍基础用法. 构造场景 订单ar ...

  7. 初探nodeJS

    一.node概要 对nodeJS早有耳闻,但是一直迟迟没有对它下手,哈哈哈,今儿咱就来初探一下它. nodeJS是个啥东东? nodeJS,我的理解就是可以运行在后端的JavaScript. 为什么它 ...

  8. scikit-learn 逻辑回归类库使用小结

    之前在逻辑回归原理小结这篇文章中,对逻辑回归的原理做了小结.这里接着对scikit-learn中逻辑回归类库的我的使用经验做一个总结.重点讲述调参中要注意的事项. 1. 概述 在scikit-lear ...

  9. 可惜Java中没有yield return

    项目中一个消息推送需求,推送的用户数几百万,用户清单很简单就是一个txt文件,是由hadoop计算出来的.格式大概如下: uid caller 123456 12345678901 789101 12 ...

  10. Windows 使用 Yeoman generators 创建 ASP.NET 应用程序

    上一篇:<Windows 搭建 .NET 跨平台环境并运行应用程序> 阅读目录: Install Node.js Install yeoman-generators Create ASP. ...