tango238/gradient_background.html

## gradient_background.html
<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <title>グラデーションの背景</title>
        <meta charset="utf-8">
    </head>
    <body>

        <script type="text/javascript">

            // Bg gradient
            var canvas = document.createElement( 'canvas' );
            canvas.width = 1;
            canvas.height = window.innerHeight;

            var context = canvas.getContext( '2d' );

            var gradient = context.createLinearGradient( 0, 0, 0, canvas.height );
            gradient.addColorStop(0, "#ffffff");
            gradient.addColorStop(.5, "#000000");

            context.fillStyle = gradient;
            context.fillRect(0, 0, canvas.width, canvas.height);

            document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')';

        </script>
    </body>
</html>
	<!DOCTYPE HTML>
	<html lang="ja">
	<head>
	<title>グラデーションの背景</title>
	<meta charset="utf-8">
	</head>
	<body>

	<script type="text/javascript">

	// Bg gradient
	var canvas = document.createElement( 'canvas' );
	canvas.width = 1;
	canvas.height = window.innerHeight;

	var context = canvas.getContext( '2d' );

	var gradient = context.createLinearGradient( 0, 0, 0, canvas.height );
	gradient.addColorStop(0, "#ffffff");
	gradient.addColorStop(.5, "#000000");

	context.fillStyle = gradient;
	context.fillRect(0, 0, canvas.width, canvas.height);

	document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')';

	</script>
	</body>
	</html>