效果:
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. Web应用程序的自动化测试库-FluentAutomation

    FluentAutomation是流畅的自动化应用编程接口,支持Selenium和WatiN 连同它们所有的风格和驱动程序.自从Fluient支持Selenium,那就意味着你可以使用Selenium ...

  2. 初识Opserver，StackExchange的监控解决方案

    Opserver是闻名遐迩的网站Stack Overflow的开源监控解决方案,由Stack Exchange发布.它基于.NET框架构建,这在监控工具领域有些与众不同. 旨在为每个受监控系统的健康状 ...

  3. Silverlight及WPF中实现自定义BusyIndicator

    在开发Silverlight或者WPF项目时,当我们调用Web服务来加载一些数据时,由于数据量比较大需要较长的时间,需要用户等待,为了给用户友好的提示和避免用户在加载数据过程中进行重复操作,我们通常使 ...

  4. 【VC++技术杂谈001】音频技术之调节音量及设置静音

    本文主要介绍如何使用混音器Mixer API函数实现系统音量调节,以及设置静音. 1.混音器的作用及结构 1.1混音器的作用 声卡(音频卡)是计算机进行声音处理的适配器,具有三个基本功能: (1)音乐 ...

  5. Highchart.js

    Highcharts所有的源代码及例子均可通过官网下载得到.初学者只需要简单的修改官方提供的例子即可了解Highcharts. 下载 最新版本:Highcharts 3.0.10.Highstock ...

  6. windows server 2008 r2 企业版 hyper v做虚拟化的相关问题处理

    windows server 2008 r2 企业版 hyper v做虚拟化的相关问题处理 今天在dell r710 上用windows server 2008 r2企业版hyper v 做虚拟化,添 ...

  7. Kali信息收集系列：（都是我以前的笔记整理了一下，就没加水印，习惯就好）

    好几天没发微信公众号了,今天一起发下.(最近有点事情) 前些天老业界的一位朋友问我一些Safe新时代信息收集的问题 逆天虽然好多年不干老本行,但隔段时间都会关注一下 于是就花了点时间整理了一下,你们就 ...

  8. 【Win10 应用开发】人脸识别

    可能你会认为人脸识别用起来会很复杂,老周当初也这么想,但通过实际操作后,我发现非然. 经过微软封装的东西,向来都是复杂问题简单化,只要用得舒心,代码越少越好,用最少的代码做最多的事情,此为大师境界也. ...

  9. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类（一）

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

  10. CSS list-style属性控制ul标签样式

    试一试 <style type="text/css" media="all"> ul { list-style-type: disc; } ul#c ...