H5Canvas绘制图形，并设置图形的颜色和透明度。这个功能在Canvas中非常常用。今天我们分享一些相关知识。我们知道黑色是Canvas绘制的默认颜色。如果你想改变一种颜色，你必须在实际绘制之前指定颜色。
ctx.strokeStyle = color
指定绘制线的颜色：
ctx.fillStyle = color
指定填充的颜色：
让我们看看实际的例子：
JavaScript
onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'rgb(192, 80, 77)'; // 红
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(155, 187, 89)'; // 绿
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}
如下图所示：
指定透明度
和普通CSS一样，我们在指定颜色的时候也可以带alpha值(但是用的不多，IE9之前也不支持)。查看代码:
onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'rgba(192, 80, 77, 0.7)'; //
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(155, 187, 89, 0.7)'; //
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(128, 100, 162, 0.7)'; //
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}
结果如下：
以上代码基本没有变化，即rgb(r, g, b)变成rgba(r, g, b, a)而且a的值也是0~1，0表示完全透明，1则完全不透明(所以alpha的值实际上是“不透明”)。
全球透明globalAlphal
这也是一个非常简单的属性，默认值为1.0，表示完全不透明，值范围为0.0(完全透明)~1.0。这个属性和阴影设置是一样的。如果你不想为整体设置不透明度，你必须在下次绘制之前重置谷歌。
综上所述：基于状态的属性是什么？
——globalAlpha
——globalCompositeOpeartion
——strokeStyle
——textAlign,textBaseline
——lineCap,lineJoin,lineWidth,miterLimit
——fillStyle
——font
——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY
通过一个代码，我们可以体验globalalpha的魔力~
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
context.globalAlpha = 0.5;
for(var i=0; i<=50; i ){
var R = Math.floor(Math.random() * 255);
var G = Math.floor(Math.random() * 255);
var B = Math.floor(Math.random() * 255);
context.fillStyle = "rgb(" R "," G "," B ")";
context.beginPath();
context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);
context.fill();
}
};
运行结果：
很酷吗？终于有点艺术家的风格了。
