本站消息
canvas绘制聚光灯
发布于2021-03-07 22:28 阅读(1390) 评论(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>
原文链接:https://blog.csdn.net/qq_42231248/article/details/114368889
所属网站分类: 技术文章 > 博客
作者：天使的翅膀
链接：http://www.qianduanheidong.com/blog/article/33510/96329330e0ea2cfd5f73/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
19
0
收藏该文
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力
程序员的那些事(new)
电子书(new)
博客(new)
视频教程(new)
问答(new)
游戏(new)