1
クリックしたときにリンクを持つキャンバスがありますが、キャンバスはボタン全体を覆っていません。これどうやってするの？これは私のキャンバスです：キャンバスカバーを上にするボタン
//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()*10+10;
}
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 {
position: relative;
}
#submit {
position: absolute;
\t left: 0;
\t right: 0;
\t top: 15%;
\t margin-left: auto;
\t margin-right: auto;
color: white;
}<button align=center>
<canvas width="100" height="25" id="canvas"></canvas>
<span id="submit">Submit</span>
</button>私はあなたがボタンの幅と高さを変更すると思うだろうが、私はよく分かりません。助けて？
感謝を役に立てば幸い！私はそれを私の答えとしてマークします！ –
なぜそれは中心に整列していませんか？ –
私はさまざまなブラウザが異なるレンダリングを持っていると述べました。したがって、独自のスタイルを提供していない場合、ブラウザは自動的にそのデフォルトに応じてボタンをレンダリングします。したがって、それは中心に整列しません。 – Manish