HTML5利用Canvas模拟上下扫描动画实现

最新推荐文章于 2024-07-23 17:34:33 发布
最新推荐文章于 2024-07-23 17:34:33 发布
阅读量4.8k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/d_x_program/article/details/77982197
版权
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>TEST</title>
</head>
<body>
<canvas id="backcanvas" width="200px" height="100px" style="position:fixed;top:0px;left:0px;"></canvas>
<canvas id="frontcanvas" width="200px" height="100px" style="position:fixed;top:0px;left:0px;"></canvas>
<script>
var interval,frontCanvas,backCanvas,frontCtx,backCtx,img;
var yFrontPosition = 0,step = 2,canvasWidth,canvasHeight;
var canvasX = 0,canvasY=0;

window.onload = function(){
initPageEle();
drawImg();
startrun();
}
function drawImg(){
img=new Image();
img.src = "Tulips.jpg";
img.onload = loadImg;
}
function initPageEle(){
frontcanvas = document.getElementById("frontcanvas");
backCanvas = document.getElementById("backcanvas");
frontCtx = frontcanvas.getContext("2d");
backCtx = backCanvas.getContext("2d");
canvasWidth = backCanvas.width ;
canvasHeight = backCanvas.height;
backCtx.fillStyle = 'rgba(255, 255, 255, 0)';
backCtx.strokeStyle = "#24303a";
backCtx.lineWidth = 2;
frontCtx.fillStyle = 'rgba(255, 255, 255, 0)';
frontCtx.strokeStyle = "white";
frontCtx.lineWidth = 2;
}
function loadImg(){
backCtx.drawImage(img,0,0,canvasWidth,canvasHeight);
drawBackground();
}
function startrun(){
interval = setInterval(draw,100);
}
function draw(){
drawFront();
}
function drawFront(){
yFrontPosition = yFrontPosition+step;
frontCtx.fillRect(canvasX,canvasY,canvasWidth,canvasHeight);
frontCtx.clearRect(canvasX,canvasY,canvasWidth,canvasHeight);
frontCtx.beginPath();
frontCtx.moveTo(canvasX,yFrontPosition);
frontCtx.lineTo(canvasWidth,yFrontPosition);
frontCtx.stroke();
frontCtx.closePath();
if(yFrontPosition>=canvasHeight){
yFrontPosition = canvasX;
}
}
function drawBackground(){
backCtx.fillStyle = "#24303a";
backCtx.globalAlpha = 0.4;
backCtx.beginPath();
backCtx.moveTo(canvasX,canvasY);
backCtx.lineTo(canvasX+canvasWidth,canvasY);
backCtx.lineTo(canvasX+canvasWidth,canvasY+canvasHeight);
backCtx.lineTo(canvasX,canvasY+canvasHeight);
backCtx.lineTo(canvasX,canvasY);
backCtx.fill();
backCtx.closePath();
backCtx.stroke();
}
function stop(){
clearInterval(interval);
}
</script>

</body>

mutu_du
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas实现扫描动画
zdluoa的博客
06-05 3722
1、扫描效果        2、技术选型    1) CSS3 使用两个元素，通过移动遮罩元素来实现圆面积变小（圆使用border-radius:50%可以实现）            问题：通过这个遮罩元素实现圆面积变化，无法实现透明，会遮住底部背景    2) canvas绘制动画，通过使用requestAnimationFrame绘制动画            问题： a.圆面积会变化 b....
html扫描动画效果,HTML5 简单的雷达扫描动画（带目标物）
weixin_42505246的博客
06-04 560
CSS语言：CSSSCSS确定* {-webkit-box-sizing: border-box;box-sizing: border-box;}#radar {position: relative;width: 300px;height: 300px;margin: auto;background: #222;overflow: hidden;border: 2px solid #8ba892;...
HTML5 Canvas 源码实现雷达扫描动画特效
03-27
基于HTML5 Canvas实现的雷达扫描动画特效源码，可以在canvas上绘制任意元素，包括3D元素。这款雷达扫描动画就是利用了canvas的灵活特性在canvas上绘制这些美丽的扫描线条，用户可以根据自己的喜好绘制出新的类似雷达扫描特效的图形
有趣的css - 动态雷达扫描
最新发布
cnzzs的博客
07-23 995
大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用 css 实现一个动态的雷达扫描，快学起来吧！ 最新文章通过公众号「设计师工作日常」发布。 目录整体效果核心代码html 代码css 部分代码完整代码如下html 页面css 样式页面渲染效果整体效果 知识点： ① animation ...
人脸扫描Canvas动画
11-18
最近研究web端人脸识别，H5拉起摄像头截取单帧图片，提交到后台进行人脸1:N搜索，发现web端没有人脸扫码的动画，因此，抽空写了个人脸扫描的动画。
canvas雷达扫描模拟动画特效.rar
06-23
canvas雷达扫描模拟动画特效.rar canvas雷达扫描模拟动画特效.rar canvas雷达扫描模拟动画特效.rar canvas雷达扫描模拟动画特效.rar canvas雷达扫描模拟动画特效.rar canvas雷达扫描模拟动画特效.rar canvas雷达扫描...
HTML5 Canvas实现的雷达扫描动画特效源码.zip
11-03
这个“HTML5 Canvas实现的雷达扫描动画特效源码.zip”压缩包文件包含了一个利用Canvas API创建的雷达扫描动画效果的示例代码。下面我们将详细探讨HTML5 Canvas及其在雷达扫描动画中的应用。 首先，Canvas是HTML5的...
canvas雷达扫描模拟动画特效.zip
07-11
综上所述，要理解并实现这个"canvas雷达扫描模拟动画特效"，开发者需要熟悉HTML5 canvas API，掌握基本的2D绘图技术，了解动画原理，以及一定的JavaScript编程技巧。同时，对于用户体验和性能优化的考虑也是必不可少...
HTML5 Canvas逼真的显示器雷达扫描动画代码
11-06
这个"HTML5 Canvas逼真的显示器雷达扫描动画代码"是利用Canvas API来实现的一种模拟雷达扫描效果的技术实例，常见于游戏、监控系统或者导航应用中，为用户提供实时更新的视觉反馈。 首先，我们要理解HTML5 Canvas的...
二维码扫描之动画效果
Francis-ChinaFeng
08-12 7284
使用ZXing做出的二维码扫描界面 界面上的黄色圆点动画效果看着不是很明显 看着没什么太大的效果 经常使用微信扫一扫功能的人都感觉，微信的动画效果看着很不错 看一下ZXing的ViewfinderView类。 我们需要定义两个变量： private int lineTop;用于计算红线与顶部的距离 private boolean bool;用于初始化判断条件 找到onDraw()方
canvas监测扫描效果
03-15
canvas实现圆盘雷达监测扫描效果，带模拟数据，代码内有详细注释
HTML5 canvas绚丽雷达扫描光环特效
12-12
这是一款效果非常绚丽的HTML5 canvas绚丽雷达扫描光环特效。该特效使用各种颜色的光环模拟雷达扫描的效果，并带有参数面板可以随时调整各种参数来查看不同的效果。
HTML5 Canvas实现雷达扫描动画特效
09-25
这是一款基于HTML5 Canvas实现的雷达扫描动画特效源码，canvas是HTML5特有的画布工具，我们可以在canvas上绘制任意元素，包括3D元素。这款雷达扫描动画就是利用了canvas的灵活特性，利用js在canvas上绘制这些美丽的扫描线条。此外这款源码还提供了点击绘制的功能，用户可以根据自己的喜好绘制出新的类似雷达扫描特效的图形。
html扫描动画效果,CSS3 animation 属性实现“扫一扫”动画效果
weixin_35012566的博客
06-04 1667
制作这个扫一扫的动画，用了2张图片。一个是“方框的四个角(2.png)”，一个是“网格(4.png)”。截图使用css3 的animation属性，使“网格”从上往下移动，显示扫描效果。查看demoHTML结构css样式.bg, .pane {width: 200px;height: 200px;margin: 0 auto;overflow: hidden; /* 隐藏显示区域外的内容*/}....
CSS特效——图片上下扫描动画
漫天随飞雪的博客
09-02 2141
参考文章：https://blog.csdn.net/qq_41595903/article/details/103142995?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159901064019724839245329%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=1599010640197248392453
微信扫码html,微信扫码显示特效_html/css_WEB-ITnose
weixin_39920338的博客
06-04 132
微信扫码显示特效：下面是实际效果：(可以自己移动鼠标，尝试效果)(由于篇幅长度，没有加兼容性前缀，演示环境为谷歌浏览器。)现在就一个一个效果单独演示：演示demo的HTML内容为：魔芋CSS：div {width:200px;height:200px;background: red;margin:50px;color:#fff;line-height:200px;font-size:30px;te...
Canvas编程练习：20几行js代码实现雷达扫描动画效果
无心的专栏
05-14 6109
灵感源于一不小心挖了一个陈年老贴etherdream发的《【分享】魔兽技能冷却效果（希望能有更好的思路）》的坟，看他的代码太长（约200行），于是自己动手写了一个，也就20多行代码，效果也还不错，点这里看DEMO(1)。 etherdream的原理是使用borderWidth的动态改变，可兼容非HTML5浏览器，缺点是代码较多，需要新增DOM节点，而且只能用纯色遮罩，不能实现用图片做遮罩。
H5实现扫一扫
热门推荐
Porcelain_cs
05-28 4万+
H5实现扫一扫 在本案例主要利用H5自带的API navigator的getUserMedia方法获得摄像头，并通过createObjectURL将数据流复制给video标签的src。 Canvas标签只是图形容器，您必须使用脚本来绘制图形。此例中video标签容于画布内，当我们调起摄像头后，设置一个定时函数，定时调起context.drawImage()函数,将画布内的内容进行一
HTML5 Canvas动画解析：绘制与动画实现
"HTML5 Canvas是用于在网页上绘制图形的重要元素，通过JavaScript代码实现动态的图形绘制和动画效果。在Canvas中，基本动画是通过不断擦除并重新绘制图形来实现的，通常涉及clearRect方法的使用以及可能的绘图状态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值