---恢复内容开始---

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

fillStyle = color

strokeStyle = color

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

下面的例子都表示同一种颜色。

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 的值。

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

<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>

</head>

<body onload="draw();" >

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

</canvas>

</body>

</html>

效果

Canvas strokeStyle 案例
说明
  这个示例与上面的有点类似，但这次用到的是 strokeStyle 属性，而且画的不是方格，而是用 arc 方法来画圆。
代码

<html>

<head>

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

<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.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ')';

      ctx.beginPath();

      ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);

      ctx.stroke();

     }

    }

}

</script>

<title>测试strokeStyle</title>

</head>

<body onload="draw();" >

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

</canvas>

</body>

</html>

效果


透明度 Transparency
  除了可以绘制实色图形，我们还可以用 canvas 来绘制半透明的图形。通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。

 globalAlpha = transparency value

globalAlpha属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为下面的方法可操作性更强一点。
因为strokeStyle和fillStyle 属性接受符合CSS3 规范的颜色值，那我们可以用下面的写法来设置具有透明度的颜色。

ctx.strokeStyle = "rgba(255,0,0,0.5)";

 ctx.fillStyle = "rgba(255,0,0,0.5)";

rgba() 方法与 rgb() 方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。

Canvas透明度globalAlpha
说明
  在这个例子里，我用四色格作为背景，设置globalAlpha 为 0.2后，在上面画一系列半径递增的半透明圆。最终结果是一个径向渐变效果。圆叠加得越更多，原先所画的圆的透明度会越低。通过增加循环次数，画更多的圆，背景图的中心部分会完全消失。
代码

<html>

 <head>

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

  <script type="text/javascript">

   function draw() {

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

    // draw background

    ctx.fillStyle = '#FD0';

    ctx.fillRect(0,0,75,75);

    ctx.fillStyle = '#6C0';

    ctx.fillRect(75,0,75,75);

    ctx.fillStyle = '#09F';

    ctx.fillRect(0,75,75,75);

    ctx.fillStyle = '#F30';

    ctx.fillRect(75,75,150,150);

    ctx.fillStyle = '#FFF';

    ctx.globalAlpha = 0.2;

    // Draw semi transparent circles

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

      ctx.beginPath();

      ctx.arc(75,75,10+10*i,0,Math.PI*2,true);

      ctx.fill();

   }

  }

</script>

<title>测试strokeStyle</title>

</head>

<body onload="draw();" >

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

</canvas>

</body>

</html>

====================================================

效果：

HTML5 Canvas 颜色填充学习的更多相关文章

  1. HTML5 Canvas渐进填充与透明

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使 用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canv ...

  2. HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern

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

  3. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  4. 学习HTML5 canvas遇到的问题

    学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的 ...

  5. 转载《学习HTML5 canvas遇到的问题》

    学习HTML5 canvas遇到的问题 1. 非零环绕原则(nonzZero rule) 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据. 在判断填充的区域拉一条线出来,拉到图形的 ...

  6. [HTML5 Canvas学习] 基础知识

    HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...

  7. HTML5 Canvas 填充与描边(Fill And Stroke)

    HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...

  8. HTML5、canvas颜色拾取器

    效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  9. HTML5 <canvas> 基础学习

    HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...

随机推荐

  1. spring拦截器

    一:拦截器配置 <!-- 拦截器 --> <mvc:interceptors> <mvc:interceptor> <mvc:mapping path=&qu ...

  2. .net ajax式上传文件

    今天在这里介绍一下ajax上传文件.其实也不算是真的使用xmlhttprequest上传,只是使用了iframe实现了无刷新上传而已,最多也只算 是仿ajax上传文件.然而网上关于使用xmlhttpr ...

  3. WORDPRESS开发(一)自定义页面显示分类目录

    第一步:自定义一个页面,如index.php 第二步:打开index.php文件,引用wp-blog-header.php文件 require('wp-blog-header.php'); 第三步使用 ...

  4. centos 软件安装 删除

    centos的软件安装大致可以分为两种类型: [centos]rpm文件安装,使用rpm指令  类似[ubuntu]deb文件安装,使用dpkg指令 [centos]yum安装   类似[ubuntu ...

  5. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  6. yii2源码学习笔记(十三）

    模型类DynamicModel主要用于实现模型内的数据验证yii2\base\DynamicModel.php <?php /** * @link http://www.yiiframework ...

  7. js带缩略图的图片切换效果

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

  8. JNI/NDK开发指南（开山篇）

    转载请注明出处:http://blog.csdn.net/xyang81/article/details/41759643 相信很多做过Java或Android开发的朋友经常会接触到JNI方面的技术, ...

  9. 降维（二）----Laplacian Eigenmaps

    降维(二)----Laplacian Eigenmaps 降维系列: 降维(一)----说说主成分分析(PCA)的源头 降维(二)----Laplacian Eigenmaps ----------- ...

  10. java api如何获取kafka所有Topic列表,并放置为一个list

    kafka内部所有的实现都是通过TopicCommand的main方法,通过java代码调用API,TopicCommand.main(options)的方式只能打印到控制台,不能转换到一个list. ...