个人中心
gpt4 book ai didi

Javascript:烟雾 Logo 效果

转载 作者：行者123 更新时间：2023-11-28 13:32:55 25 4
gpt4 key购买 nike

我正在尝试制作一个带有烟雾的 Logo 。我偶然发现了这个jsfiddle: http://jsfiddle.net/jonnyc/Ujz4P/5/现在我正在尝试更改它，使其覆盖 Logo 但它不想工作。

index.html

<html>
<head>
<title>Smoke</title>
<style>
.container
{
  width: 360px;
  height: 200px;
  border: 2px solid black;
 }
 </style>
 <script type="text/javascript" src="smoke_effect.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 </head>
 <body>
 <div class="container">
   <img id="smoke-logo" src="images.jpg"/>
 </div>
 </body>
 </html>

以及jsfiddle左侧的所有javascript我将其粘贴到名为smoke_effect.js的文档中，但是我根本没有更改代码，我只是将标签从“myCanvas”更改为“smoke-logo” ”。

最佳答案

我对您的 fiddle 做了 2 个重大更改

我将 CSS 更改为:

#myCanvas{
    background:transparent;
}

绘制函数不是用半透明的黑色填充，而是清除 Canvas 。

// The function to draw the scene
function draw() {
    // Clear the drawing surface and fill it with a black background
    //context.fillStyle = "rgba(0, 0, 0, 0.5)";
    //context.fillRect(0, 0, 400, 400);
    context.clearRect(0,0,400,400);
    // Go through all of the particles and draw them.
    particles.forEach(function(particle) {
        particle.draw();
    });
}

这将允许您将图像放在烟雾后面。

关于Javascript:烟雾 Logo 效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23525662/

25 4 0
文章推荐： css - 尝试使用 CSS 形成带边框的文件夹选项卡样式的 div
文章推荐： javascript - 文本没有内联显示？
文章推荐： jQuery 发光动画 : how to improve?
文章推荐： javascript - 一些关于 }) 的 JS/jquery 代码的语法错误；
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com