canvas绘制聚光灯-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

天使的翅膀

1634

文章

929816

访问

+关注

分类

暂无分类

日期归档

2024-11(4)

canvas绘制聚光灯

发布于2021-03-07 22:28 阅读(1508) 评论(0) 点赞(19) 收藏(2)

无图不欢，先上图
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="keywords" content="风舞红枫,前端技术,canvas"/>
	<meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/>
	<title>聚灯光</title>
	<link rel="icon" href="../image/icon2.ico">
	<style type="text/css">
		*{margin:0;padding:0;}
		html,body{height:100%;}
		#myCanvas{position: absolute;z-index: 1;left: 50%;margin-left: -148px;top:102px;width: 330px;height: 162px;background: rgba(255,255,255,0);}
		canvas{display: block;position: absolute;top:0;left: 0;}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var obody = document.getElementsByTagName('body')[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;
			oCanvas.width = width;
			oCanvas.height = height;

			//填充黑色背景图层
			oCtx.beginPath();
			var xingkong = oCtx.createLinearGradient(0,0,0,height);
				xingkong.addColorStop(0,"rgba(0,0,0,1)");
				xingkong.addColorStop(1,"rgba(0,0,0,0.9)");
			oCtx.fillStyle = xingkong;
			oCtx.moveTo(0,0);
			oCtx.lineTo(width,0);
			oCtx.lineTo(width,height);
			oCtx.lineTo(0,height);
			oCtx.fill();
			oCtx.closePath();

			oCtx.beginPath();
			var xingkong = oCtx.createLinearGradient(0,100,0,340);
				xingkong.addColorStop(0,"rgba(0,153,204,0.3)");
				xingkong.addColorStop(1,"rgba(0,153,204,0.1)");
			oCtx.fillStyle = xingkong;
			//oCtx.strokeStyle = "rgba(255,255,255)";
			oCtx.lineWidth = 4;
			oCtx.moveTo(width/2-150,100);
			oCtx.lineTo(width/2+150,100);
			oCtx.lineTo(width/2+150,250);
			oCtx.lineTo(width/2-150,250);
			oCtx.lineTo(width/2-150,100);
			oCtx.fill();
			oCtx.stroke();
			oCtx.closePath();

			oCtx.beginPath();
			oCtx.moveTo(width/2-150,100);
			oCtx.lineTo(width/2-400,130);
			oCtx.lineTo(width/2-400,280);
			oCtx.lineTo(width/2-150,250);
			oCtx.fill();
			oCtx.stroke();
			oCtx.closePath();

			oCtx.beginPath();
			oCtx.moveTo(width/2-400,130);
			oCtx.lineTo(width/2-600,190);
			oCtx.lineTo(width/2-600,340);
			oCtx.lineTo(width/2-400,280);
			oCtx.fill();
			oCtx.stroke();
			oCtx.closePath();

			oCtx.beginPath();
			oCtx.moveTo(width/2+150,100);
			oCtx.lineTo(width/2+400,130);
			oCtx.lineTo(width/2+400,280);
			oCtx.lineTo(width/2+150,250);
			oCtx.fill();
			oCtx.stroke();
			oCtx.closePath();

			oCtx.beginPath();
			oCtx.moveTo(width/2+400,130);
			oCtx.lineTo(width/2+600,190);
			oCtx.lineTo(width/2+600,340);
			oCtx.lineTo(width/2+400,280);
			oCtx.fill();
			oCtx.stroke();
			oCtx.closePath();

			//第一蓝块
			oCtx.beginPath();
			oCtx.rotate(-Math.PI/12);
			//oCtx.scale(1,1);
			//oCtx.skew(0,0);
			oCtx.lineWidth = 1;
			oCtx.font = '32px Arial';
			oCtx.textAlign = 'center';
			oCtx.textBaseline = 'bottom';
			oCtx.strokeStyle = "rgba(255,255,255)";
			oCtx.strokeText("Coming soon", width/2-560 , 290);
			oCtx.fillText("Coming soon", width/2-560, 290);
			oCtx.strokeStyle = "rgba(255,255,255,0)";
			oCtx.rotate(Math.PI/12)
			oCtx.closePath();

			//第二蓝块
			oCtx.beginPath();
			oCtx.rotate(-Math.PI/4);
			oCtx.translate(-130,-50);
			var yue = oCtx.createLinearGradient(width/2-308,width/2-308,width/2-292,width/2-308);
				yue.addColorStop(0,"rgba(255,255,255,1)");
				yue.addColorStop(0.5,"rgba(255,255,255,0)");
			oCtx.fillStyle = yue;
			oCtx.strokeStyle = "rgba(255,255,255,0)";
			BezierEllipse2(oCtx, width/2-300 , 500 , 16 , 20)
			oCtx.fill();
			oCtx.rotate(Math.PI/4)
			oCtx.translate(0,0);
			oCtx.closePath();			for(var i=0;i<30;i++){
				oCtx.beginPath();
				oCtx.fillStyle = "rgba(255,255,255,1)";
				oCtx.strokeStyle = "rgba(255,255,255,0)";
				BezierEllipse2(oCtx, width/2-150+rand(-100,100) , 150+rand(-70,48) , 1 , 1);
				oCtx.fill();
				oCtx.closePath();
			}

			//第四蓝块

			var i = new Array();
			var direction = new Array();
			var oCxt = new Array();
			var time = new Array();
			dg(200 , 100 , 55 , 105 , 222 , 170 , 1) ;
			dg(width-200 , 100 , 0 , 255 , 255 , width-230 , 4);
			dg(width-520 , 60 , 204 , 51 , 153 , width-550 , 3);
			dg(520 , 60 , 255 , 255 , 51 , 500 , 2);

			function dg(a , b , red , green , blue , position , index){
				oCanvas[index] = document.getElementsByTagName('canvas')[index];
				oCanvas[index].style.zIndex = index; 
				oCanvas[index].width = width;
				oCanvas[index].height = height;				
				oCtx[index] = oCanvas[index].getContext('2d');

				//a:光源起始位置x轴 
				//b:光源起始位置y轴 
				//red,green,blue光的三原色
				//position光圈起始位置
				//index光源个数

				i[index] = position;
				direction[index] = 0;
				time[index] = setInterval(function(){
					if(i[index]>=width - (width-a)/2){
						direction[index] = -1;
					}else if(i[index]<= 0){
						direction[index] = 1;
					}else if(direction[index] == 0){
						direction[index] = rand(-1,1);
					}

					i[index] += rand(3,9)*direction[index];
					var x = Math.sqrt((i[index] - position)*(i[index] - position) + (0.82*height - b)*(0.82*height - b))/(0.82*height - b);
					oCtx[index].clearRect(0,0,width,height); 

					//背景透明
					oCtx[index].beginPath();
					oCtx[index].fillStyle = "rgba(255,255,255,0)";
					oCtx[index].moveTo(0,0);
					oCtx[index].lineTo(width,0);
					oCtx[index].lineTo(width,height);
					oCtx[index].lineTo(0,height);
					oCtx[index].fill();
					oCtx[index].closePath();

					//画光源
					oCtx[index].beginPath();
					oCtx[index].strokeStyle = "rgb("+red+","+green+","+blue+")";
					oCtx[index].fillStyle = "rgb("+red+","+green+","+blue+")";
					BezierEllipse2(oCtx[index], a+10, b-4, 14, 6);
					oCtx[index].fill();
					oCtx[index].closePath();

					//画灯光
					oCtx[index].beginPath();
					var dgStyle= oCtx[index].createLinearGradient(0,0,0,0.82*height);
						dgStyle.addColorStop(0,"rgba("+red+","+green+","+blue+",0.8)");
						dgStyle.addColorStop(0.5,"rgba("+red+","+green+","+blue+",0.3)");
						dgStyle.addColorStop(1,"rgba("+red+","+green+","+blue+",0)");
					oCtx[index].fillStyle = dgStyle;
					oCtx[index].moveTo(a,b);
					oCtx[index].lineTo(a+20,b);
					oCtx[index].lineTo((i[index]+80)*x,0.82*height);
					oCtx[index].lineTo(i[index]*x,0.82*height);
					oCtx[index].fill();
					oCtx[index].closePath();

					//画光圈
					oCtx[index].beginPath();
					oCtx[index].strokeStyle = "rgb("+red+","+green+","+blue+",0)";
					/**
				     * 径向渐变 RadialGradient( 小圆圆心横坐标, 小圆圆心纵坐标, 小圆半径, 大圆圆心横坐标, 大圆圆心纵坐标, 大圆半径 )
				     */
				    var radial =  oCtx[index].createRadialGradient((i[index]+40)*x, 0.82*height, 0, (i[index]+40)*x, 0.82*height, 40*x); //创建径向渐变
					    radial.addColorStop(0.0, "rgb("+red+","+green+","+blue+",0.4)");
					    radial.addColorStop(0.5, "rgb("+red+","+green+","+blue+",0.2)");
					    radial.addColorStop(1.0, "rgb("+red+","+green+","+blue+",0)");
				    oCtx[index].fillStyle = radial;
					//oCtx[index].fillStyle = "rgb("+red+","+green+","+blue+",0.2)";
					BezierEllipse2(oCtx[index], (i[index]+40)*x, 0.82*height, 40*x, 18);
					oCtx[index].fill();
					oCtx[index].closePath();
				},30);
			}

			//画椭圆
			function BezierEllipse2(ctx, x, y, a, b)
			{
			   var k = .5522848,
			   ox = a * k, // 水平控制点偏移量
			   oy = b * k; // 垂直控制点偏移量

			   ctx.beginPath();
			   //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
			   ctx.moveTo(x - a, y);
			   ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
			   ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
			   ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b); 
			   ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
			   ctx.closePath();
			   ctx.stroke();
			}

			//随机n到m的一个整数
			function rand(n,m){
				var c = m - n + 1;
				return Math.floor(Math.random() * c + n);
			}

			setTimeout(function (){
				var v = document.getElementById("video1");
		        var c = document.getElementById("myCanvas");
		        ctx = c.getContext('2d');
		        //每20毫秒画一次图
		        v.addEventListener('play', function() {
		        var i = window.setInterval(function() {
		            ctx.drawImage(v, 0, 0, 270, 135);
		            //打印当前视频的播放时间
		            //console.log(v.currentTime);
		            //当视频结束的时候去掉循环
		            if(v.ended){
		                clearInterval(i)
		            }
		            }, 20);
		        }, false);
		        //将视频暂停，然后观察canvas里面的效果
		        setTimeout(function(){
		            v.pause();
		        },4000);
		        //将视频播放，然后观察canvas里面的效果
		        setTimeout(function(){
		            v.play();
		        },7000)

		  //       var myBarrage = new CanvasBarrage(c, v, options);
		  //       myBarrage.opacity = 50;
		  //       myBarrage.fontSize = 20;
		  //       myBarrage.add(obj);
		  //       myBarrage.add({
				//     value: 'new CanvasBarrage()',
				//     color: '#ff0000',
				//     time: 0
				// });
	   		},3000)
		}
	</script>
</head>
<body>
	<video id="video1"  width="300" height="150" src="1.mp4" loop autoplay></video>
	<canvas>您的浏览器版本太低</canvas>	
	<canvas>您的浏览器版本太低</canvas>	
	<canvas>您的浏览器版本太低</canvas>
	<canvas>您的浏览器版本太低</canvas>	
	<canvas>您的浏览器版本太低</canvas>
	<canvas id="myCanvas">您的浏览器版本太低</canvas>
</body>
</html>