0
Was ich will ist, dass es eine Schaltfläche gibt, und der Hintergrund der Schaltfläche eine Leinwand sein. Das ist mein Button-Code:Machen Sie Canvas Act als eine Schaltfläche
//Lets create a simple particle system in HTML5 canvas and JS
//Initializing the canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//Canvas dimensions
var W = 500; var H = 500;
//Lets create an array of particles
var particles = [];
for(var i = 0; i < 50; i++)
{
\t //This will add 50 particles to the array with random positions
\t particles.push(new create_particle());
}
//Lets create a function which will help us to create multiple particles
function create_particle()
{
\t //Random position on the canvas
\t this.x = Math.random()*W;
\t this.y = Math.random()*H;
\t
\t //Lets add random velocity to each particle
\t this.vx = Math.random()*20-10;
\t this.vy = Math.random()*20-10;
\t
\t //Random colors
\t var r = Math.random()*255>>0;
\t var g = Math.random()*255>>0;
\t var b = Math.random()*255>>0;
\t this.color = "rgba("+r+", "+g+", "+b+", 0.5)";
\t
\t //Random size
\t this.radius = Math.random()*20+20;
}
var x = 100; var y = 100;
//Lets animate the particle
function draw()
{
\t //Moving this BG paint code insde draw() will help remove the trail
\t //of the particle
\t //Lets paint the canvas black
\t //But the BG paint shouldn't blend with the previous frame
\t ctx.globalCompositeOperation = "source-over";
\t //Lets reduce the opacity of the BG paint to give the final touch
\t ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
\t ctx.fillRect(0, 0, W, H);
\t
\t //Lets blend the particle with the BG
\t ctx.globalCompositeOperation = "lighter";
\t
\t //Lets draw particles from the array now
\t for(var t = 0; t < particles.length; t++)
\t {
\t \t var p = particles[t];
\t \t
\t \t ctx.beginPath();
\t \t
\t \t //Time for some colors
\t \t var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);
\t \t gradient.addColorStop(0, "white");
\t \t gradient.addColorStop(0.4, "white");
\t \t gradient.addColorStop(0.4, p.color);
\t \t gradient.addColorStop(1, "black");
\t \t
\t \t ctx.fillStyle = gradient;
\t \t ctx.arc(p.x, p.y, p.radius, Math.PI*2, false);
\t \t ctx.fill();
\t \t
\t \t //Lets use the velocity now
\t \t p.x += p.vx;
\t \t p.y += p.vy;
\t \t
\t \t //To prevent the balls from moving out of the canvas
\t \t if(p.x < -50) p.x = W+50;
\t \t if(p.y < -50) p.y = H+50;
\t \t if(p.x > W+50) p.x = -50;
\t \t if(p.y > H+50) p.y = -50;
\t }
}
setInterval(draw, 33);
//I hope that you enjoyed the tutorial :)<button align=center>
<canvas id="canvas"></canvas>
<span id="submit">Submit</span>
</button>Aus irgendeinem Grund ist der Knopf riesig, und ich weiß nicht, warum, aber auch, ich möchte meinen Text auf der Leinwand sein . Wie kann ich das machen?
wie diese [Geige] (http://jsfiddle.net/Lgq85vm3/1/)? –
@ Mi-Kreativität Ja! Danke! –
Legen Sie auch Padding, Rand und Rand auf 0 fest. –