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)
使用更方便