2
HTML + JavaScriptで基本フォームを作成したいのですが、作成する方法は？ここでフォームとhtmlの作成
は私が作成したHTMLフォームのは、JavaScript（雪）私は、フォームが作成されますが、私はそれに書き込むことができない、インターネットから
function myFunction(){
var canvas = document.getElementByName("vardas");
alert(canvas);
console.log(canvas);
}
window.onload = function(){
\t //canvas init
\t var canvas = document.getElementById("canvas");
\t var ctx = canvas.getContext("2d");
\t
\t //canvas dimensions
\t var W = window.innerWidth;
\t var H = window.innerHeight;
\t canvas.width = W;
\t canvas.height = H;
\t //snowflake particles
\t var mp = 100; //max particles
\t var particles = [];
\t for(var i = 0; i < mp; i++)
\t {
\t \t particles.push({
\t \t \t x: Math.random()*W, //x-coordinate
\t \t \t y: Math.random()*H, //y-coordinate
\t \t \t r: Math.random()*4+1, //radius
\t \t \t d: Math.random()*mp //density
\t \t })
\t }
\t
\t //Lets draw the flakes
\t function draw()
\t {
\t \t ctx.clearRect(0, 0, W, H);
\t \t
\t \t ctx.fillStyle = "white";
\t \t ctx.beginPath();
\t \t for(var i = 0; i < mp; i++)
\t \t {
\t \t \t var p = particles[i];
\t \t \t ctx.moveTo(p.x, p.y);
\t \t \t ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
\t \t }
\t \t ctx.fill();
\t \t update();
\t }
\t //Function to move the snowflakes
\t //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
\t var angle = 0;
\t function update()
\t {
\t \t angle += 0.01;
\t \t for(var i = 0; i < mp; i++)
\t \t {
\t \t \t var p = particles[i];
\t \t \t //Updating X and Y coordinates
\t \t \t //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
\t \t \t //Every particle has its own density which can be used to make the downward movement different for each flake
\t \t \t //Lets make it more random by adding in the radius
\t \t \t p.y += Math.cos(angle+p.d) + 1 + p.r/2;
\t \t \t p.x += Math.sin(angle) * 2;
\t \t \t
\t \t \t //Sending flakes back from the top when it exits
\t \t \t //Lets make it a bit more organic and let flakes enter from the left and right also.
\t \t \t if(p.x > W+5 || p.x < -5 || p.y > H)
\t \t \t {
\t \t \t \t if(i%3 > 0) //66.67% of the flakes
\t \t \t \t {
\t \t \t \t \t particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
\t \t \t \t }
\t \t \t \t else
\t \t \t \t {
\t \t \t \t \t //If the flake is exitting from the right
\t \t \t \t \t if(Math.sin(angle) > 0)
\t \t \t \t \t {
\t \t \t \t \t \t //Enter from the left
\t \t \t \t \t \t particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
\t \t \t \t \t }
\t \t \t \t \t else
\t \t \t \t \t {
\t \t \t \t \t \t //Enter from the right
\t \t \t \t \t \t particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t }
\t }
\t
\t //animation loop
\t setInterval(draw, 33);
}body {
\t /*You can use any kind of background here.*/
\t background: #6b92b9;
}
canvas {
\t position: absolute;
\t display: block;
}<!DOCTYPE html>
<html>
<head>
<title>forms</title>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="demo.js"></script>
<canvas id="canvas"></canvas>
</head>
<body>
\t your name:<br>
\t <input type="text" name="vardas"><br>
\t <button type="button">Click Me!</button>
</body>
</html>
を取りました。
z-index：-10作品!!! zインデックスでjsキャンバスはフォームの下にポストされます。タイ！ –
しかし、フォーム上で作業フォームと雪を作る方法。今はすべて動作していますが、雪が降っています。フォームに雪を降ろす方法は？ –
「雪の上のフォーム」とは何を意味するのか分かりませんか？あなたは雪が入力に落ちるようにしますか？ – Ruby