canvas渐隐

最新推荐文章于 2023-05-10 15:09:41 发布

苟不住了-_-

最新推荐文章于 2023-05-10 15:09:41 发布

阅读量511

点赞数

分类专栏：前端文章标签： canvas 渐隐

本文链接：https://blog.csdn.net/iarebleieve/article/details/94718041

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.在绘制每帧图像时调整

重新绘制每帧中要渐隐的部分，调整颜色和透明度，所有改变都由自己控制，逻辑和代码可能比较复杂（没有尝试过）。

2.使用半透明区域反复覆盖

该方法的原理是将目标区域内的原图像以相同的比例透明化。该方法的核心是使用canvas.getContext(“2d”)的context对象的globalCompositeOperation属性。将globalCompositeOperation设为destination-in（在新绘制的区域中显示原图像。只有新绘制的区域内的原图像部分会被显示，新区域是透明的。），此时将新区域的fillStyle设置一个透明系数，每次填充新区域时，都会将原来的图透明化。但由于使用了destination-in，没有被新区域覆盖的部分会被完全清空，所以只能用于全局透明化或单一图层。

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="rgb(255, 0, 0, 1)";//设置线条颜色
ctx.fillStyle="rgba(0, 0, 0, 0.7)";//设置填充区域颜色为白色，透明度0.7，用于将区域渐变为透明
var x=0,y=0;
setInterval(draw, 200);

function draw(){
	//对区域内图像进行透明化渐变
	ctx.globalCompositeOperation = "destination-in";// 在新绘制的区域中显示原图像。只有新绘制的区域内的原图像部分会被显示，新区域是透明的。
	ctx.fillRect(0,0,150,100);// 填充区域，将目标图像逐渐透明化
	ctx.globalCompositeOperation = "source-over";默认。在原图像上绘制新图像。

	//绘制直线
	ctx.beginPath();
	if (x > 150) x=0,y=0;
	ctx.moveTo(x,y);
	x+=4,y+=4;
	ctx.lineTo(x,y);
	ctx.stroke();
}
</script>
</body>
</html>