Javascript:Smoke-Logo效果

Uns*_*ing 0 html javascript jquery canvas

我正试图制作一个标志,让它遍布它.我匆匆进入这个jsfiddle:http: //jsfiddle.net/jonnyc/Ujz4P/5/现在我正在尝试改变它,所以它会越过徽标,但它不想工作.

的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>
Run Code Online (Sandbox Code Playgroud)

并且在jsfiddle左侧的所有javascript我将其粘贴到名为smoke_effect.js的文档中但是我根本没有更改代码我只是将标记从"myCanvas"更改为"smoke-logo".

Pat*_*son 5

我对你的小提琴进行了两次重大改动

我将CSS更改为:

#myCanvas{
    background:transparent;
}
Run Code Online (Sandbox Code Playgroud)

和绘图功能,而不是填充半透明的黑色,只是清除画布.

// 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();
    });
}
Run Code Online (Sandbox Code Playgroud)

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

  • @Unsparing只是将Patrick的例子中的css更改为`background:transparent url([你的图像路径])左上角不重复;`它应该可以工作. (3认同)