canvas中globalAlpha无效的问题

萤火虫塔莉

于 2019-04-18 16:14:54 发布

阅读量1.4k

点赞数 2

分类专栏： canvas

本文为博主原创文章，未经允许禁止转载

本文链接：https://blog.csdn.net/sinat_27088253/article/details/89381252

版权

canvas 专栏收录该内容

1 篇文章

订阅专栏

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;
		
	}
}

bug图片
开始感觉很奇怪，后来改变了一下ctx.globalAlpha = 0.5;的位置，将其放在ctx.fill()前面，发现结果就对了
正确的图片
思考了一下原因，发现是ctx.fill()方法回自动闭合上一条路径，导致代码还没有运行到ctx.globalAlpha = 0.5;，第一个圆圈的路径就已经闭合，后面再设置的透明度，虽然是全局透明度但也无效了