canvas绘制探光灯

风舞红枫

已于 2022-03-19 14:52:12 修改

阅读量182

点赞数 1

分类专栏： canvas 文章标签： canvas

于 2021-03-05 09:19:51 首次发布

本文链接：https://blog.csdn.net/qq_42231248/article/details/114369196

版权

canvas 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

无图不欢，先上图

canvas绘制探光灯

<!DOCTYPE html>
<html>
<head>
	<meta name="keywords" content="风舞红枫,前端技术,canvas"/>
	<meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/>
	<meta charset="utf-8">
	<link rel="icon" href="../image/icon2.ico">
	<title>探灯光</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		html,body{height:100%;overflow: hidden;background:rgba(0,0,0,0.9);}
		.yc{cursor:none;}
		img{display: block;z-index:-1;position: relative;}
		canvas{display: block;position: absolute;top:0;left: 0;}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var obody = document.getElementsByTagName('body')[0];
			var oImage = document.getElementsByTagName('img')[0];
			var oCanvas = document.getElementsByTagName('canvas')[0];
			var oCtx = oCanvas.getContext('2d');
			var width = document.getElementsByTagName('body')[0].offsetWidth;
			var height = document.getElementsByTagName('body')[0].offsetHeight;
			var imageWidth = document.getElementsByTagName('img')[0].offsetWidth;
			var imageHeight = document.getElementsByTagName('img')[0].offsetHeight;
			oCanvas.width = width;
			oCanvas.height = height;
			
			oCtx.scale(width/imageWidth,width/imageWidth);
			oImage.style.width = "100%";

			oCanvas.onmousemove = function(){
				obody.className = '';
				timer = null;
				if(time != null){
					clearInterval(time);
					time = null;
				}

				var e = event || window.event;

				oCtx.save();
				oCtx.clearRect(0,0,width*imageWidth/width,height*imageWidth/width); 
				oCtx.beginPath();
				oCtx.arc(e.clientX*imageWidth/width, e.clientY*imageWidth/width, 100, 0, Math.PI * 2, false);
				oCtx.clip();
				oCtx.closePath();

				oCtx.beginPath();
				oCtx.drawImage(oImage , 0 , 0);
				oCtx.closePath();

				oCtx.beginPath();
				oCtx.arc(e.clientX*imageWidth/width, e.clientY*imageWidth/width, 100, 0, Math.PI * 2, false);
				var water =  oCtx.createRadialGradient(e.clientX*imageWidth/width, e.clientY*imageWidth/width, 70, e.clientX*imageWidth/width, e.clientY*imageWidth/width, 100); //创建径向渐变
					water.addColorStop(0.0, "rgba(255,255,255,0)");
					water.addColorStop(0.5, "rgba(255,255,255,0.4)");
					water.addColorStop(1.0, "rgba(255,255,255,0)");
				oCtx.fillStyle = water;
				oCtx.stroke();
				oCtx.fill();
				oCtx.closePath();

				
				setTimeout(function(){
					obody.className = 'yc';
				},3000);

				oCtx.restore();
			}

			var time = null;
			oCanvas.onclick = function(){
				if(time == null){
					var speed = 6;
					var enlarge = 0;
					var e = event || window.event;
					time = setInterval(function(){
						enlarge++;
						oCtx.save();
						oCtx.clearRect(0,0,width*imageWidth/width,height*imageWidth/width); 
						oCtx.beginPath();
						oCtx.arc(e.clientX*imageWidth/width, e.clientY*imageWidth/width, 100+speed*enlarge, 0, Math.PI * 2, false);
						oCtx.clip();
						oCtx.closePath();

						oCtx.beginPath();
						oCtx.drawImage(oImage , 0 , 0);
						oCtx.closePath();

						oCtx.beginPath();
						/*
					     径向渐变 RadialGradient( 小圆圆心横坐标, 小圆圆心纵坐标, 小圆半径,大圆圆心横坐标, 大圆圆心纵坐标, 大圆半径 )
					     */
					    var water =  oCtx.createRadialGradient(e.clientX*imageWidth/width, e.clientY*imageWidth/width, 70+speed*enlarge, e.clientX*imageWidth/width, e.clientY*imageWidth/width, 100+speed*enlarge); //创建径向渐变
						    water.addColorStop(0.0, "rgba(255,255,255,0)");
						    water.addColorStop(0.5, "rgba(255,255,255,0.6)");
						    water.addColorStop(1.0, "rgba(255,255,255,0)");
						oCtx.arc(e.clientX*imageWidth/width, e.clientY*imageWidth/width, 100+speed*enlarge, 0, Math.PI * 2, false);
						oCtx.fillStyle = water;
						oCtx.stroke();
						oCtx.fill();
						oCtx.closePath();

						oCtx.restore();

						if(speed*enlarge>width*(imageWidth/width+100)){
							clearInterval(time);
							time = null;
						}
					},30);
				}
			}

			//随机n到m的一个整数
			function rand(n,m){
				var c = m - n + 1;
				return Math.floor(Math.random() * c + n);
			}
		}
	</script>
</head>
<body>
	<img src="2.jpg">
	<canvas>您的浏览器版本太低</canvas>
</body>
</html>