canvas实现探照灯

最新推荐文章于 2025-06-04 23:12:35 发布

suweim

最新推荐文章于 2025-06-04 23:12:35 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： canvas实现探照灯特效

本文链接：https://blog.youkuaiyun.com/suweim/article/details/73849011

本文通过HTML5 canvas元素实现了一个探照灯特效。首先设置了canvas的尺寸，然后利用2D绘图上下文绘制了一个黄色的圆形作为探照灯光源，并通过clip()方法创建了剪切区域。接着在剪切区域内填充红色文字，使其仅在探照灯区域内可见。通过update()函数更新光源位置，实现探照灯的移动效果。最后，使用定时器不断重绘画面并更新光源状态，完成动态的探照灯展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>探照灯</title>
<style>
#myCanvas{
border:1px solid #ccc;
display:block;
margin:0 auto;
}
</style>

</head>
<body>
<canvas id="myCanvas">
<p>您的浏览器不支持canvas元素</p>
</canvas>
</body>
<script>
var mycanvas=document.getElementById('myCanvas');
//设置宽度和高度
mycanvas.width=800;
myCanvas.height=540;
//获取2d绘制对象
var cxt=mycanvas.getContext('2d');
//cxt.clip()将当前路径剪切之后车，成为新的画布(显示的画布)

//定义一个灯
var linghter={
x:400,
y:270,
r:50,
vx:5,
vy:4
}
//定义惠子当前画布的函数
function draw(){
// 清除画布
cxt.clearRect(0,0,800,540);
//当前位置填充黑色的矩形框
cxt.fillRect(0,0,800,540);
//存储状态
cxt.save();
//绘制一个圆
cxt.beginPath();
cxt.arc(linghter.x,linghter.y,linghter.r,0,Math.PI*2);
cxt.fillStyle='yellow';
cxt.fill();
cxt.closePath();
//剪切 --画布中在该区域的数据才会被显示
cxt.clip();
//写入文字
cxt.fillStyle='red';
cxt.textAlign='center';
cxt.fillText('看不到看不到',20,80);
cxt.fillText('看不到看不到',20,180);
cxt.fillText('看不到看不到',20,280);
cxt.fillText('看不到看不到',20,380);
cxt.fillText('看不到看不到',20,480);
//恢复
cxt.restore();
}

//定义函数update(){}

function update(){
linghter.x+=linghter.vx;
linghter.y+=linghter.vy;
//判断临界点
if(linghter.x<linghter.r || linghter.x>(800-linghter.r)){
linghter.vx*=-1;
}
//y方向
if(linghter.y<linghter.r || linghter.y>(540-linghter.r)){
//反向
linghter.vy*=-1;
}
}
//调用函数
draw();
//定时器
setInterval(function(){
//绘制画面
draw();
//更细状态
update();
},20);
</script>
</html>