jQuery:在调整大小的图像上冒烟

乔治

我想在图像上添加烟雾(图像会自动调整为用户的屏幕宽度),是否可以使用jQuery,CSS和HTML来做到这一点?非常感谢你。我如何将其集成到此代码中(我知道它很草率)。而且我宁愿不使用任何外部文件...谢谢您的帮助。

This is my HTML:
    <!DOCTYPE html>
<html>
<head>
<style type="text/css">
    #myCanvas{
    background:black;
    max-width: 100%;
    opacity: .5;
}
img{
    position: absolute;
    left:0;
    max-width: 100%;
}
 </style>
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
// Create an array to store our particles
var particles = [];

// The amount of particles to render
var particleCount = 160;

// The maximum velocity in each direction
var maxVelocity = 2;

// The target frames per second (how often do we want to update / redraw the scene)
var targetFPS = 33;

// Set the dimensions of the canvas as variables so they can be used.
var canvasWidth = 1366;
var canvasHeight = 768;

// Create an image object (only need one instance)
var imageObj = new Image();

// Once the image has been downloaded then set the image on all of the particles
imageObj.onload = function() {
    particles.forEach(function(particle) {
            particle.setImage(imageObj);
    });
};

// Once the callback is arranged then set the source of the image
imageObj.src = "http://www.blog.jonnycornwell.com/wp-content/uploads/2012/07/Smoke10.png";

// A function to create a particle object.
function Particle(context) {

    // Set the initial x and y positions
    this.x = 0;
    this.y = 0;

    // Set the initial velocity
    this.xVelocity = 0;
    this.yVelocity = 0;

    // Set the radius
    this.radius = 5;

    // Store the context which will be used to draw the particle
    this.context = context;

    // The function to draw the particle on the canvas.
    this.draw = function() {

        // If an image is set draw it
        if(this.image){
            this.context.drawImage(this.image, this.x-128, this.y-128);         
            // If the image is being rendered do not draw the circle so break out of the draw function                
            return;
        }
        // Draw the circle as before, with the addition of using the position and the radius from this object.
        this.context.beginPath();
        this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
        this.context.fillStyle = "rgba(0, 255, 255, 1)";
        this.context.fill();
        this.context.closePath();
    };

    // Update the particle.
    this.update = function() {
        // Update the position of the particle with the addition of the velocity.
        this.x += this.xVelocity;
        this.y += this.yVelocity;

        // Check if has crossed the right edge
        if (this.x >= canvasWidth) {
            this.xVelocity = -this.xVelocity;
            this.x = canvasWidth;
        }
        // Check if has crossed the left edge
        else if (this.x <= 0) {
            this.xVelocity = -this.xVelocity;
            this.x = 0;
        }

        // Check if has crossed the bottom edge
        if (this.y >= canvasHeight) {
            this.yVelocity = -this.yVelocity;
            this.y = canvasHeight;
        }

        // Check if has crossed the top edge
        else if (this.y <= 0) {
            this.yVelocity = -this.yVelocity;
            this.y = 0;
        }
    };

    // A function to set the position of the particle.
    this.setPosition = function(x, y) {
        this.x = x;
        this.y = y;
    };

    // Function to set the velocity.
    this.setVelocity = function(x, y) {
        this.xVelocity = x;
        this.yVelocity = y;
    };

    this.setImage = function(image){
        this.image = image;
    }
}

// A function to generate a random number between 2 values
function generateRandom(min, max){
    return Math.random() * (max - min) + min;
}

// The canvas context if it is defined.
var context;

// Initialise the scene and set the context if possible
function init() {
    var canvas = document.getElementById('myCanvas');
    if (canvas.getContext) {

        // Set the context variable so it can be re-used
        context = canvas.getContext('2d');

        // Create the particles and set their initial positions and velocities
        for(var i=0; i < particleCount; ++i){
            var particle = new Particle(context);

            // Set the position to be inside the canvas bounds
            particle.setPosition(generateRandom(0, canvasWidth), generateRandom(0, canvasHeight));

            // Set the initial velocity to be either random and either negative or positive
            particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
            particles.push(particle);            
        }
    }
    else {
        alert("Please use a modern browser");
    }
}

// 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, 1366, 768);

    // Go through all of the particles and draw them.
    particles.forEach(function(particle) {
        particle.draw();
    });
}

// Update the scene
function update() {
    particles.forEach(function(particle) {
        particle.update();
    });
}

// Initialize the scene
init();

// If the context is set then we can draw the scene (if not then the browser does not support canvas)
if (context) {
    setInterval(function() {
        // Update the scene befoe drawing
        update();

        // Draw the scene
        draw();
    }, 1000 / targetFPS);
}
});//]]>  

</script>









<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body class='  wsite-theme-light'>
<div id="wrapper">
    <div class="bg-wrapper">
        <div id="header">
            <div id="sitename" class="sitetitle">ZOMBIEZ, A UNIQUE GAMEMODE</div>
        </div>
                    <div id="startcontainer">
                            <script type="text/javascript" src="/files/theme/smoke_effect.js"></script>
                            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
                            <script src="/files/theme/smoke_effect.js"></script>
                            <img id="mainscreenimage" src="http://gamershavennews.com/wp-content/uploads/2011/12/gm_construct0003.jpeg" alt="" />
                            <canvas id="myCanvas" width="1366" height="768"></canvas>
                            <div id="DIV_1">
                                <a href="#content" id="A_2"></a>
                            </div>

                    </div>
        <div id="content-wrapper">
        <div id="content">
        <div id="intro">
                    <script type="text/javascript">
                        (function() {
                        var img = document.getElementById('startcontainer').firstChild;
                        var height = $(window).height(); 
                            img.onload = function() {
                                if(img.height > img.width) {
                                    //img.height = '100%';
                                    img.height = height;
                                    img.width = 'auto';
                                }
                            };
                        }());
                    </script>
            </div>




            {content}
            </div>
        </div>
    </div>
    <div id="footer">
        <div id="footer-content">{footer}</div>
    </div>
</div>
<div style='display:none'>{title}</div>
<div style='display:none'>{menu}</div>
</body>
</html>
害群之马

您需要max-width: 100%调整图像大小

现场演示

的CSS

#myCanvas{
    background:black;
    max-width: 100%;
    opacity: .5;
}

img{
    position: absolute;
    left:0;
    max-width: 100%;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery-调整图像大小以适合div

来自分类Dev

加载前调整图像大小-jQuery

来自分类Dev

Codeigniter图像调整大小?

来自分类Dev

图像上的DrawText,文字调整为图像的大小

来自分类Dev

调整窗口大小时修改图像大小(jQuery)

来自分类Dev

在脚本jQuery中调整图像大小

来自分类Dev

jQuery ui:调整大小还会触发“窗口”上的调整大小

来自分类Dev

调整Java图像大小

来自分类Dev

停止调整图像大小

来自分类Dev

调整画布图像的大小

来自分类Dev

在Ubuntu上使用convert调整图像的大小

来自分类Dev

在summernote上的insertimage之后调整图像大小

来自分类Dev

快速调整图像大小

来自分类Dev

调整Vaadin图像大小

来自分类Dev

基本的jquery滑块图像大小无法调整大小

来自分类Dev

Codeigniter图像调整大小?

来自分类Dev

覆盖图像上的链接,可调整图像大小

来自分类Dev

在脚本jQuery中调整图像大小

来自分类Dev

调整图像大小

来自分类Dev

图像调整大小的错误

来自分类Dev

Colorbox上的jQuery图像调整大小

来自分类Dev

在窗口调整大小上运行Jquery

来自分类Dev

调整画布图像的大小

来自分类Dev

在jQuery中调整图像大小无法在所有图像上使用

来自分类Dev

调整XXHDPI的图像大小

来自分类Dev

如何使用可调整大小的jQuery在x和y轴上以正确的比例调整图像大小

来自分类Dev

在浏览器大小上按行调整图像大小

来自分类Dev

在按钮上使用Jquery调整SVG图像的大小

来自分类Dev

在不使用jquery调整大小的图像上缩放SVG