话不多说，先看实现效果
编辑
Implemetation
- 探照灯：五角星+旋转+边界检测
- 背景：底色+阴影
- 图片：自适应大小+不透明度0.8+阴影
- 文字：阴影
UI Color matching
前层画布：#222222
后层画布：#eeeeee
文字：#3399ff
如果有小伙伴总是对配色产生烦恼，博主推荐三个优质配色网站
渐变色：Gradient Colors Collection Palette - CoolHue 2.0
配色：BrandColors - official brand color hex codes
配色：Color Palettes for Designers and Artists - Color Hunt
Engineering Structure
编辑
Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Polygonal searchlight</title> </head> <body> <!--设置一个高800，宽800大的画布--> <canvas id="canvas" height="800" width="800"></canvas> <script> var rot = 0; // 创建一个探照灯,开始时在（400,400）的位置，半径为150,x方向移动速度为vx，y方向移动速度为vy var searchLight = { x: 400, y: 400, radius: 230, vx: Math.random() * 5 + 10, vy: Math.random() * 5 + 10, } //界面开始加载 window.onload = function () { //先加载画布 var canvas = document.getElementById("canvas"); //加载画布中的2d图像 var ctx = canvas.getContext("2d"); canvas.width = 800; canvas.height = 800; //设置刷新时间，每隔20毫秒刷新一次 setInterval(function () { draw(ctx); update(canvas.width, canvas.height); }, 30); } //绘制底片的照片和文字 function draw(context) { //对画布进行清空 context.clearRect(0, 0,800, 800); context.save(); context.beginPath(); context.fillStyle = "black"; context.fillRect(0, 0, context.canvas.width, context.canvas.height); //将画布背景换成灰色 context.fillStyle = "#d6dde3"; context.shadowColor='#878787'; context.shadowOffsetX=5; context.shadowOffsetY=5; context.shadowBlur=2; context.save(); context.translate(searchLight.x, searchLight.y); context.rotate(rot / 180 * Math.PI); context.scale(searchLight.radius,searchLight.radius); //绘制路径 starPath(context); context.fill(); //使用clip进行绘制区域的剪辑 context.restore(); context.clip(); context.font = "bold 45px Arial"; context.textAlign = " left"; context.textBaseline = "middle"; context.fillStyle = "#3fa9f5"; context.fillText("CSDN", 450, 370); context.fillText("北村南", 450, 420); //实现图片自适应 let image = new Image(); image.src = 'Fengdi.jpg'; //设置图片不透明度 context.globalAlpha=0.8; context.drawImage(image, 200, 300, 200, 200); context.restore(); } //update动画碰撞检测（*） function update(canvasWidth, canvasHeight) { rot += 1; searchLight.x += searchLight.vx; searchLight.y += searchLight.vy; if (searchLight.x - searchLight.radius <= 0) { searchLight.vx = -searchLight.vx; searchLight.x = searchLight.radius; } if (searchLight.x + searchLight.radius >= canvasWidth) { searchLight.vx = -searchLight.vx; searchLight.x = canvasWidth - searchLight.radius; } if (searchLight.y - searchLight.radius <= 0) { searchLight.vy = -searchLight.vy; searchLight.y = searchLight.radius; } if (searchLight.y + searchLight.radius >= canvasHeight) { searchLight.vy = -searchLight.vy; searchLight.y = canvasHeight - searchLight.radius; } } //绘制一个五角星（*） function starPath(ctx) { ctx.beginPath(); for (var i = 0; i < 5; i++) { ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI), -Math.sin((18 + i * 72) / 180 * Math.PI)); ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5, -Math.sin((54 + i * 72) / 180 * Math.PI) * 0.5); } ctx.closePath(); } </script> </body> </html>
