canvas中globalAlpha无效的问题

版权声明：本文为博主原创文章，若转载请附上原地址~ https://blog.csdn.net/sinat_27088253/article/details/89381252

canvas中的globalAlpha属性用来设置全局的透明度，但是下面的代码显示出来的确有一个元素（圆圈）的透明度没有改变，如图

var ctx = canvas.getContext('2d');

for(let i = 0; i< 10; i++){
	for(let j = 0; j< 10; j++){
		ctx.fillStyle = 'rgb(' + Math.floor(225 - 22.5*i) + ',' + Math.floor(225 - 22.5*j) + ',' + Math.floor(0 + 22.5*j) +')';
		ctx.beginPath();
		ctx.arc(20*(i+1), 20*(j+1), 10, 0, 2*Math.PI, false);
		ctx.fill();
		ctx.globalAlpha = 0.5;
		
	}
}

开始感觉很奇怪，后来改变了一下ctx.globalAlpha = 0.5;的位置，将其放在ctx.fill()前面，发现结果就对了

思考了一下原因，发现是ctx.fill()方法回自动闭合上一条路径，导致代码还没有运行到ctx.globalAlpha = 0.5;，第一个圆圈的路径就已经闭合，后面再设置的透明度，虽然是全局透明度但也无效了