canvas绘制霓虹灯-带光晕

最新推荐文章于 2024-06-12 10:25:35 发布

书院二层楼

最新推荐文章于 2024-06-12 10:25:35 发布

阅读量1k

点赞数

分类专栏： JS canvas 文章标签： canvas

本文链接：https://blog.csdn.net/caoxinjian423/article/details/109514579

版权

本文详细介绍了如何利用HTML5的canvas元素来绘制具有光晕效果的霓虹灯，涵盖了绘制路径、颜色渐变、光照模拟等关键技术点。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas霓虹灯-光晕</title>
    <style>
        html{height: 100%;overflow: hidden;}
        body{height: 100%;margin: 0;}
        #test{
            background: #000;
        }
    </style>
</head>
<body>
    <canvas id="test"></canvas>
<script>
    const cvs=document.getElementById('test');
    cvs.width=window.innerWidth;
    cvs.height=window.innerHeight;

    const  ctx=cvs.getContext('2d');

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

    function draw(){
        //保存上下文对象的状态
        ctx.save();
        //偏移坐标系
        ctx.translate(300,400);
        //开始绘制路径
        ctx.beginPath();
        //向路径集合中添