Canvas实现霓虹灯表白效果

最新推荐文章于 2024-07-21 10:17:51 发布

鹏北海-RemHusband

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量320

点赞数 4

分类专栏： Canvas 文章标签： javascript 前端开发语言 canva可画

本文链接：https://blog.csdn.net/qq_44910894/article/details/137269958

版权

Canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本恋爱脑闲的无聊做的，适配了 PC 端和移动端

效果

`PC`浏览器

在这里插入图片描述

移动端

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>❤❤❤❤❤</title>
  <style>
    html {
      height: 100%;
    }

    body {
      margin: 0;
      height: 100%;
    }

    #canvas {
      background: #000;
    }
  </style>

</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    //canvas充满窗口
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    //画笔
    const ctx = canvas.getContext('2d');

    //颜色数组
    const colors = ['red', 'yellow'];

    function draw() {
      // 判断当前设备类型并输出相应信息
      if (isMobileDevice()) {
        canvas.height = 1500;
        // console.log("当前设备是移动设备");
        //保存上下文对象的状态
        ctx.save();
        //偏移坐标系
        ctx.translate(window.innerWidth / 2, window.innerHeight / 2);
        //开始绘制路径
        ctx.beginPath();
        //向路径集合中添加子路径
        //绘制心形子路径
        //设置路径起点
        ctx.moveTo(0, 625);
        //用两个三次贝塞尔曲线组成爱心
        ctx.bezierCurveTo(-100, 575, -90, 475, 0, 525);
        ctx.bezierCurveTo(90, 475, 100, 575, 0, 625);
        //设置描边宽度
        ctx.lineWidth = 4;
        //虚线
        ctx.setLineDash([30]);
        /*虚线1*/
        //描边颜色
        ctx.strokeStyle = colors[0];
        //以描边的方式显示路径
        ctx.stroke();
        //填充红色
        ctx.fillStyle = 'red'; // 设置填充颜色为红色
        ctx.fill(); // 填充路径
        /*虚线2*/
        ctx.strokeStyle = colors[1];
        ctx.lineDashOffset = 30;
        //投影-光晕
        ctx.shadowColor = 'orange';
        for (let i = 50; i > 5; i -= 5) {
          ctx.shadowBlur = i;
          ctx.stroke();
        }
        //将上下文对象的状态恢复到上一次保存时的状态
        ctx.restore();
        renderText('某', 150, 150, 'bold 150px arial')
        renderText('某', 150, 350, 'bold 150px arial')
        renderText('某', 150, 550, 'bold 150px arial')
        renderText(',', 200, 650, 'bold 150px arial')
        renderText('i', 200, 850, 'bold 170px arial')
        renderText('you', 80, 1250, 'bold 170px arial')
        renderText('!', 200, 1450, 'bold 170px arial')
      } else {
        // console.log("当前设备是PC设备");
        //保存上下文对象的状态
        ctx.save();
        //偏移坐标系
        ctx.translate(window.innerWidth / 2 - 200, window.innerHeight / 2);
        //开始绘制路径
        ctx.beginPath();
        //向路径集合中添加子路径
        //绘制心形子路径
        //设置路径起点
        ctx.moveTo(0, 250);
        //用两个三次贝塞尔曲线组成爱心
        ctx.bezierCurveTo(-200, 150, -180, -50, 0, 50);
        ctx.bezierCurveTo(180, -50, 200, 150, 0, 250);
        //设置描边宽度
        ctx.lineWidth = 6;
        //虚线
        ctx.setLineDash([60]);
        /*虚线1*/
        //描边颜色
        ctx.strokeStyle = colors[0];
        //以描边的方式显示路径
        ctx.stroke();
        //填充红色
        ctx.fillStyle = 'red'; // 设置填充颜色为红色
        ctx.fill(); // 填充路径
        /*虚线2*/
        ctx.strokeStyle = colors[1];
        ctx.lineDashOffset = 60;
        //投影-光晕
        ctx.shadowColor = 'orange';
        for (let i = 50; i > 5; i -= 5) {
          ctx.shadowBlur = i;
          ctx.stroke();
        }
        //将上下文对象的状态恢复到上一次保存时的状态
        ctx.restore();

        renderText('某 某 某', 150, 300, 'bold 220px arial')
        renderText('i', 400, 700, 'bold 350px arial')
        renderText('you!', 1000, 700, 'bold 350px arial')
      }
    }
    draw();

    setInterval(function () {
      //清理画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      colors.reverse();
      draw();
    }, 200)


    function renderText(text, x, y, fontStyle) {
      //保存上下文对象的状态
      ctx.save();
      /*文字位置*/
      //字体属性
      ctx.font = fontStyle;
      //设置描边样式
      ctx.strokeStyle = colors[0];
      //设置描边宽度
      ctx.lineWidth = 3;
      //虚线
      ctx.setLineDash([8]);
      //以描边的方式显示路径
      ctx.strokeText(text, x, y);
      //第二部分虚线
      ctx.lineDashOffset = 8;
      ctx.strokeStyle = colors[1];
      //光晕
      ctx.shadowColor = 'orange';
      //多画几遍光晕
      for (let i = 25; i > 3; i -= 2) {
        ctx.shadowBlur = i;
        ctx.strokeText(text, x, y);
      }
      //将上下文对象的状态恢复到上一次保存时的状态
      ctx.restore();
    }

    // 检测用户代理字符串是否包含移动设备的关键词或标识符
    function isMobileDevice() {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }


  </script>
</body>

</html>