canvas动态曲线

最新推荐文章于 2024-06-12 19:26:52 发布

kongjunchao159

最新推荐文章于 2024-06-12 19:26:52 发布

阅读量1k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/kongjunchao159/article/details/47317557

版权

canvas 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<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>

kongjunchao159

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas动态曲线

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;//绘制线条f
复制链接

扫一扫

专栏目录