<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<canvas width="800" height="450"></canvas>
<script>
var context = document.getElementsByTagName('canvas')[0].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 background(){
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0,0,context.canvas.width,context.canvas.height);
//通过每隔一段时间以半透明的黑色重绘整个画布,可以实现已绘制的线条渐隐的效果
}
setInterval(background,40);
</script>
</body>
</html>
<head>
<meta charset="utf-8" />
</head>
<body>
<canvas width="800" height="450"></canvas>
<script>
var context = document.getElementsByTagName('canvas')[0].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 background(){
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0,0,context.canvas.width,context.canvas.height);
//通过每隔一段时间以半透明的黑色重绘整个画布,可以实现已绘制的线条渐隐的效果
}
setInterval(background,40);
</script>
</body>
</html>