Question

我想在图像上添加烟雾（自动调整大小到用户的屏幕宽度），无论如何使用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>

Answer 1

将最大宽度更改为100％

即

 max-width: 100%;

Answer 2

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

Live Demo

CSS

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

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

jQuery：对图像进行调整以调整大小

2 个答案: