canvas-简单的线条来回扫描

最新推荐文章于 2024-03-25 21:40:20 发布

fanzhang1990

最新推荐文章于 2024-03-25 21:40:20 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： h5—canvas简单动画效果

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/fanzhang1990/article/details/23395761

h5—canvas简单动画效果专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas实现的简单视觉效果——红线索引扫描。通过JavaScript编程，实现了红线在Canvas区域内来回扫描的功能，展示了基本的Canvas绘图操作及动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的线条来回在canvas区域内扫描，很简单的效果!

<body>

<div>

<canvas id="_canvas" width="700" height="500">

</canvas>

</div>

<script>

window.onload =function(){

var canvas2d = document.getElementById("_canvas");

var c_w = canvas2d.width;

var c_h = canvas2d.height;

canvas2d = canvas2d.getContext("2d");

//红线来回扫描

var be_y = 1;

canvas2d.lineWidth = 2;

var add = 1;

function saomiao()

{

    canvas2d.clearRect(0,0,c_w,c_h);

canvas2d.fillStyle = "black";

canvas2d.fillRect(0,0,c_w,c_h);

canvas2d.strokeStyle = "red";

canvas2d.beginPath();

canvas2d.moveTo(0,be_y);

canvas2d.lineTo(c_w,be_y);

be_y += add;

canvas2d.stroke();

if(be_y == c_h)

add = 0 - add;

if(be_y == 0)

add = Math.abs(add);

}

setInterval(saomiao,10);

};

</script>

</body>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。