HTML5 canvas 透明

最新推荐文章于 2024-05-17 16:33:04 发布

coding_or_coded

最新推荐文章于 2024-05-17 16:33:04 发布

阅读量2.5w

点赞数

分类专栏： HTML5 文章标签： html5 function 算法

本文链接：https://blog.csdn.net/coding_or_coded/article/details/7069423

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

透明

Context对象可以通过改变它的globalAlpha属性来改变生成它的Canvas对象的透明度。globalAlpha属性的取值范围是[0, 1]，0表示完全透明，1表示完全不透明。

例子如下：

<!DOCTYPE HTML>
<html>
<body>
<canvas id="canvas" width="600"height="400">    
         <p>Your browserdoes not support the canvas element!</p>    
</canvas>    
     
<script type="text/javascript">    
	var canvas =document.getElementById("canvas");    
	var context2D =canvas.getContext("2d"); 
	const TIME = 1    
	var factor = 0;  
	
	function changeAlpha() {    
         factor+= TIME/50;    
         context2D.globalAlpha= (Math.sin(factor) + 1) / 2;   //这里采用简单算法布置透明    
	}  
	
	function draw() { 
		context2D.clearRect(0,0, canvas.width, canvas.height); 	
		changeAlpha();
		//将上面的圆填充为灰色  		
        context2D.fillStyle ="#FF0000"; 
        context2D.arc(100,100, 60, 0, Math.PI*2 , false);    //注意这里的参数是弧度制，而不是角度制
        context2D.fill(); 
	}    
	
	setInterval(draw, TIME); 
     
</script>    
</body>
</html>

效果图：

ps：由于是动态图，截屏出来的效果只是一帧，不能出现动态效果，读者可以自己亲手做实验。另外有比较好的方式制作动态图，可以留言，不胜感激。

coding_or_coded

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 canvas 透明

透明Context对象可以通过改变它的globalAlpha属性来改变生成它的Canvas对象的透明度。globalAlpha属性的取值范围是[0, 1]，0表示完全透明，1表示完全不透明。例子如下： Your browserdoes not support the canvas element!
复制链接

扫一扫