如何将【canvas学习笔记三】中的样式和颜色成？
摘要：上一节我们学习了如何用路径绘制各种形状，但我们只能用默认的颜色和线条。这节就来学习设置不同的颜色和线条样式。 颜色 设置颜色主要有两个属性： fillStyle = color 设置填充颜色 strokeStyle = color 设置描边
上一节我们学习了如何用路径绘制各种形状，但我们只能用默认的颜色和线条。这节就来学习设置不同的颜色和线条样式。
颜色
设置颜色主要有两个属性：
fillStyle = color
设置填充颜色
strokeStyle = color
设置描边颜色
颜色值可以用十六进制也可以用一些内置的颜色字符，还可以用rgb和rgba格式。
例子：
// these all set the fillStyle to 'orange'
ctx.fillStyle = 'orange';
ctx.fillStyle = '#FFA500';
ctx.fillStyle = 'rgb(255, 165, 0)';
ctx.fillStyle = 'rgba(255, 165, 0, 1)';
下面来看看一个填充颜色的例子和一个描边颜色的例子：
填充颜色示例
在下面这个例子中，我们创建了6X6的方块，每个方块都填充了不同的颜色。根据i、j的值，生成R通道和G通道的值，而B通道的值为固定值0。
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);
}
}
}
效果
描边颜色示例
这个例子和上一个例子类似。在这个例子中，R通道的值固定，G和B通道的值根据i、j的值变化。
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();
}
}
}
效果
Tips：
如果没有设置fillStyle或strokeStyle，则默认的fillStyle或strokeStyle是黑色，如果设置了fillStyle或strokeStyle，则默认的颜色就变成设置的颜色。
透明
我们可以直接通过rgba的方式设置颜色从而实现透明的效果，如下：
// Assigning transparent colors to stroke and fill style
ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
我们还可以设置全局的透明度，设置了全局透明度，之后绘制的图形都会是这个透明度。全局透明度的值是0~1。