Here is a simple example of use of the HTML5 canvas element With which you can draw a pretty glowing lines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- https://www.w3schools.com/tags/ref_canvas.asp -->
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5 Example</title>
<meta name="description" content="">
<meta name="author" content="Vijay">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<div>
<header>
<h1>HTML</h1>
</header>
<canvas id="canvasGlowing" width="800" height="450"></canvas>
<script>
var canvas = document.getElementById('canvasGlowing');
var context = canvas.getContext('2d');
var lastX = context.canvas.width * Math.random();
var lastY = context.canvas.height * Math.random();
var hue = 0;
function line() {
context.save();
context.translate(context.canvas.width / 2, context.canvas.height / 2);
context.scale(0.9, 0.9);
context.translate(-context.canvas.width / 2, -context.canvas.height / 2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
context.moveTo(lastX, lastY);
lastX = context.canvas.width * Math.random();
lastY = context.canvas.height * Math.random();
context.bezierCurveTo(context.canvas.width * Math.random(), context.canvas.height * Math.random(), context.canvas.width * Math.random(), context.canvas.height * Math.random(), lastX, lastY);
hue = hue + 10 * Math.random();
context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
context.shadowColor = 'white';
context.shadowBlur = 10;
context.stroke();
context.restore();
}
setInterval(line, 50);
function blank() {
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
setInterval(blank, 40);
</script>
<footer>
<p>
© Copyright by Vijay
</p>
</footer>
</div>
</body>
</html>
0 Comments