html5实现待机动画的效果

最新推荐文章于 2021-08-17 16:47:56 发布

原创最新推荐文章于 2021-08-17 16:47:56 发布 · 857 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

120 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas API实现待机动画的方法。通过动态调整透明度和旋转角度，绘制了一系列小长方形来形成动画效果。该示例展示了如何利用Canvas的clearRect、translate、rotate和globalAlpha等属性。

<!DOCTYPE html>

<html>

<head>

<title>html5实现待机动画的效果</title>

</head>

<body>

</canvas>

var can1=document.getElementByIdx_x("can1");

var cxt=can1.getContext("2d");

var cw=parseInt(can1.width);

var ch=parseInt(can1.height);

//该计数器是用来控制透明度的，这样可以实现动画效果

var count=0;

aim();

function aim(){

cxt.clearRect(0,0,400,300);

//下边开始绘制我们的36个小长方形

for(var i=0;i<36;i++){

cxt.save();

//绘制原理是绘制完我们的长方形图形之后，将其旋转

var r=(i*10)*Math.PI/180;

//1,将坐标原点移动到我们画布的中心

cxt.translate(cw/2,ch/2);

cxt.rotate(r);

if(i==count){

cxt.globalAlpha=1.0;

}

else{

cxt.globalAlpha=0.3;

}

cxt.beginPath();

cxt.fillStyle="gray";

cxt.fillRect(0,0,100,5);

cxt.restore();

}

count=(count+1)6;

}

setInterval("aim()",100);

</script>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

战略观察者

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

告别“静态Banner”：零基础打造可交互HTML5网页动画

海外设计界工作十余年的设计师

09-25

678

今天，我想分享一套完整的、零代码基础也能上手的Animate工作流，教你如何创造出可以在网页上丝滑运行、并能响应用户点击的HTML5交互式动画。

emWin 2天速成实例教程004_软件定时器(Timer)和位图片动画

玩转emWin

11-22

1万+

emWin的TIMER是一个软件定时器，它以OS_TimeMS变量的值作为定时基准，而OS_TimeMS则通过一个硬件定时器每1ms中断加1，在emWin内部程序不断查询OS_TimeMS的变化实现软件定时。

参与评论您还未登录，请先登录后发表或查看评论

用html做一个拍拍网界面视频,用canvas做一个DVD待机动画的实现代码

weixin_39540725的博客

06-07

838

免责声明不是打算教 canvas，只是觉得好玩就简单看了一下。意思就是做得略粗糙，别喷我。。效果帧数略低，实际当然流畅得多。实现 HTML* {margin: 0;padding: 0;}body {background-color: lightblue;}#canvas {background-color: black;width: 100vw;}/* 见下 */JSwindow.onload ...

html5 实现动画（一）

wjlgryx的专栏

03-23

143

你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器或者 FireFox 浏览器帧数：每次移动距离： //定时器 var interval=null; //停止动画 function stop(){ clearInterval(interval); } //======...

Android 忆童年 DVD 待机动画

weixin_34242819的博客

12-24

385

周末逛「即刻」开到这个消息，然后心生一计，我可以自己做一个 DVD 的 loading效果啊。什么？你不知道 DVD 是啥？呵呵，暴露年龄了。这是一个具有年代感的东西。你没看到过说明要么你年轻，年轻好啊。要么你家穷，我那会儿反正是租的碟片在同学家放，自己家买是不可能的了，一辈子都不可能。正式开始实现之前，开始简单的建模及分析。整体效果就是：一个圆或者矩形在一个大的矩形（类比电视屏幕）上面运...

javascript作品：网页开屏效果

07-18

网页开屏 var x = 10; var dx = 5; var y = window.screen.availHeight; var newWin = window.open("", "myWin", "menubar=0,toolbar=0"); newWin.resizeTo(x, y); var time = window.setInterval("active()", 100); function active() { if(newWin.closed){ clearInterval(time); return; } else if(x < screen.availWidth){ x+=dx; } else { clearInterval(time); } newWin.resizeTo(x,y); }

html如何给按钮加动态效果,css3 实现按钮点击动画效果(加工)

weixin_35242523的博客

06-04

3312

项目中的网页需要给按钮添加动画效果,只需要如下css文件即可:/*** 按钮的点击动画效果,2018年1月12日09:36:48**/input.btn {display: inline-block;/* margin: 15px 15px 0;padding: .6em 1.1em; */font-size: 12px;font-size: 1.625rem;text-decoration:...

用canvas做一个DVD待机动画的实现代码

12-13

实现 HTML <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> * {...

基于HTML5 Canvas的自动售货机动画实现源码

HTML5 Canvas 实现的自动售货机动画效果源码，是一套基于现代前端技术栈开发的交互式 Web 动画项目，充分展示了 HTML5 中 Canvas 元素在图形绘制、动画渲染与用户交互方面的强大能力。该项目通过 JavaScript 编程...

uniapp的vue2项目怎么实现待机页面效果，点击到首页，长时间无操作进入待机页面，如果使用store，怎么注册使用vuex

最新发布

08-05

第一部分：实现待机页面效果思路： - 在应用根组件或需要监控的页面中，设置一个定时器，用于检测用户无操作的时间。 - 当用户无操作超过设定的时间（例如5分钟），则跳转到待机页面。 - 在待机页面中，点击...

怎么用js实现类似windows待机画面的气泡碰撞及炸开的效果

07-16

要实现类似 Windows 待机画面的气泡碰撞及炸开的效果，你可以使用 HTML5 的 Canvas 元素和 JavaScript 来实现。下面是一个简单的示例代码： HTML： ```html <canvas id="bubble-canvas"></canvas> ``` CSS： ```...

5秒不动开始锁屏或待机画面

07-24

模仿手机做的待机特效，当页面在设定时间内无操作，则自动跳转到另一个页面，另一个页面当鼠标移动时自动跳转到之前的页面

Unity动画知识之二：Animator动画状态机

冰与火之歌

11-09

2万+

文/拉撒路　　上次我们讲过Unity游戏动画从入门到住院，今天我们来讲一下动画状态机。　　好了，现在我们已经成功的导入了动画。接下来要玩的东西就很装13啦。因为大部分动画师是用不到这家伙的，需要掌握这个技能的，至少也是动画组长级别了。嗯。。。一个组只有你一个动画的，闭嘴！给你个同情的眼神。　　这个装叉的东西就是动画状态机　　嘛~肯定有不明真相的吃

html等待,休眠代码,javascript 使用sleep函数的常见方法详解

weixin_30863333的博客

06-08

4107

本文实例讲述了javascript 使用sleep函数的常见方法。分享给大家供大家参考，具体如下：一.什么是sleep函数？花一点时间来聊一下sleep函数，首先什么是sleep函数？sleep是一种函数，他的作用是使程序暂停指定的时间，起到延时的效果。例如：console.log('1');sleep(5000);console.log('2');控制台输出数字1后会间隔5秒后输出数字2当然上面...

HTML中的动画效果