canvas烟雾效果学习

最新推荐文章于 2024-08-28 21:44:39 发布

唐小狼

最新推荐文章于 2024-08-28 21:44:39 发布

阅读量4.6k

点赞数 3

分类专栏：前端工程师学习笔记

本文链接：https://blog.csdn.net/tangxiaolang101/article/details/65629157

版权

本文源于对张鑫旭大神关于canvas烟雾效果的研究，通过深入理解烟雾生成函数，探讨如何创建逼真的动态烟雾效果。关键在于利用特定函数确保烟雾在平面上的连续性，以增强动画的真实感和飘逸感。建议读者尝试不同函数以深化对canvas绘图及动画原理的理解。

摘要由CSDN通过智能技术生成

一、学习背景与效果

前些天翻大神blog，看到了张鑫旭大神写的一篇《canvas图形绘制之星空、噪点与烟雾效果》，深受启发。详细了研究了一下烟雾效果的代码，效果如下：动态效果请点击。（!-- 去掉了原文中的背景图 --!）

效果图：

代码如下：

<!DOCTYPE html>
<html>

<head>
  <title>canvas实现的烟雾缭绕效果</title>
  <style>
    .smoke {
      height: 500px;
      background: #fff;
      background-size: cover;
      position: relative;
    }
    
    .smoke canvas {
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="main">
    <h1>canvas实现的烟雾缭绕效果实例页面</h1>
    <div i