Canvas 填充样式 fillStyle

在上一章节 Canvas 填充矩形 我们学习了如何在 canvas 上绘制一个矩形并填充颜色

但我们绘画的都是一个黑色的填充矩形,能否向现实生活中使用不同的颜色涂鸦呢?比如用不同的画笔填充不同的颜色

canvas 的设计者们肯定也考虑到了这一点,于是提供了 ctx.fillStyle 属性用来定制填充的颜色

ctx.fillStylectx.strokeStyle 类似,除了名字和作用不一样之外,其它一模一样

fillStyle 属性

ctx.fillStyle 属性用于设置填充(绘制图形)颜色或者样式

默认值是黑色 #000 (black)

语法

ctx.fillStyle = color;
ctx.fillStyle = gradient;
ctx.fillStyle = pattern;
说明
color 一个字符串颜色值,可以是任意的 CSS 颜色值,比如 red#000
gradient 一个渐变,是一个 CanvasGradient 对象 ( 线性渐变或放射性渐变),我们后面会讲
pattern 一个绘画对象,是一个 CanvasPattern 对象 ( 可重复的图片),可以是一张图片,或者另一个画布

下面这些颜色都是 橙色

ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)"

例如我们要绘制一个绿色的矩形,可以这么做

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.strokeRect(50,50,200,50);
</script>

运行结果如下


fillStyle 一旦设置就会成为接下来的默认画笔,除非再次调用设置为其它的值

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-2" width="400" height="300">
</canvas>
</div>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0,0,200,200);
ctx.fillStyle = "#ccc";
ctx.fillRect(0,0,100,100);
ctx.fillStyle = "red";
ctx.fillRect(50,50,100,100);
ctx.fillStyle = "#00ff00";
ctx.fillRect(250,250,100,100);
</script>

运行结果如下



绘图的顺序

我们在 Canvas 绘制矩形 结尾中有提到,在画板 ( canvas ) 上绘图时遵循的顺序是:后来画的会覆盖之前画的

看看上图的各个图形,就一目了然了

绘制调色器

我们可以使用两层 for 循环来绘制方格阵列,每个方格不同的颜色

用两个变量 i 和 j 来为每一个方格产生唯一的 RGB 色彩值,其中仅修改红色和绿色通道的值,而保持蓝色通道的值不变

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-3" width="400" height="300">
</canvas>
</div>
<script>
var ctx = document.getElementById('canvas-3').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>

运行效果如下

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.