canvas样式和颜色

color（颜色）

fillStyle = color;	// 设置图形的填充颜色
stokeStyle = color;	// 设置图形的轮廓颜色

注：

• color表示css颜色字符串，可以是字符串，渐变对象或者图像，默认情况下填充和线条的颜色是黑色（#000000）；
• 如果设置了fillStyle或者strokeStyle的值，设置的新值将会是后面绘制图形的默认值。

例如：

ctx.fillStyle = "green";
ctx.fillStyle = "#ff3300";
ctx.fillStyle = "rgb(0,0,200)";
ctx.fillStyle = "rgba(0,0,200,0.8)";

例如：

let cvs = document.getElementById("cvs");
	if (cvs.getContext) {
		let ctx = cvs.getContext("2d");
		for (let i=0; i<6; i++) {
			for (let j=0; j<6; j++) {
				ctx.fillStyle = "rgb("+Math.floor(255-42.5*i)+","+Math.floor(255-42.5*j)+","+ 0 + ")";
				ctx.fillRect(2.5+24*j,2.5+24*i,24,24);
				ctx.strokeStyle = "rgb("+Math.floor(255-42.5*i)+","+Math.floor(255-42.5*j)+","+ 0 + ")";
				ctx.beginPath();
				ctx.arc(162.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
				ctx.stroke();
			}
		}
	}

transparency（透明度）

在canvas中可以绘制半透明的图形，可以使用globalAlpha属性或者设置半透明的颜色（rgba(0,0,0,0.3)）作为填充或者轮廓描边。

globalAlpha = transparencyValue;

注：

• 此属性影响到canvas中所有图形的透明度，有效范围（0.0~1.0），默认为1.0（完全不透明）。
• globalAlpha属性需要绘制大量拥有相同透明度的图形时是相当高效的。
• 设置了ctx.globalAlpha = 0.2;，只对设置以后的图形透明度有影响，对设置此值之前的图形无影响。
• rgba(0,0,0,0.3)使用更方便