用 canvas 做一个 DVD 待机动画

前言

封面大图仅供参考，请以实物为准。

你也曾经为 DVD 待机界面的图标刚好撞进屏幕角落兴奋过吗？

来看段视频回忆一下先。

免责声明

不是打算教 canvas，只是觉得好玩就简单看了一下。

意思就是做得略粗糙，别喷我。。

效果

帧数略低，实际当然流畅得多。

实现

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>* {margin: 0;padding: 0;}body {background-color: lightblue;}#canvas {background-color: black;width: 100vw;}</style>
</head>
<body><canvas id="canvas"></canvas><script>/* 见下 */</script>
</body>
复制代码

JS

window.onload = function () {let// 画布ctx = document.getElementById('canvas').getContext('2d'),// 画布大小canvas_width = document.getElementById('canvas').width,canvas_height = document.getElementById('canvas').height,// DVD 图标的文本颜色、字体、背景色text_color = ['green', 'blue', 'purple', 'yellow', 'white', 'yellow', 'white'],text_font = 'italic bold 50px yahei',background_color = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],// 背景矩形的尺寸background_width = 110,background_height = 50,// 向矩形添加文本时，高度有点偏差fix_height = 7,// 速度，每次重绘移动 0.5 pxspeed_x = 0.5,speed_y = 0.5,// 移动方向，初始为 'r-b' 右下direction = 'r-b',// 图标 x 和 y 坐标，初始为 0position_x = 0,position_y = 0,// 碰撞次数，用来计算背景和文本颜色count = 0dvd()function dvd() {// 移动方向switch (direction) {// 右下case 'r-b':position_x += speed_xposition_y += speed_ybreak// 右上case 'r-t':position_x += speed_xposition_y -= speed_ybreak// 左下case 'l-b':position_x -= speed_xposition_y += speed_ybreak// 左上case 'l-t':position_x -= speed_xposition_y -= speed_ybreak}// 清空画布ctx.clearRect(0, 0, canvas_width, canvas_height)// 重绘ctx.fillRect(position_x, position_y, background_width, background_height)// 碰撞检测// 底if (position_y + background_height >= canvas_height) {direction = direction.replace('b', 't')// 碰撞次数统计count += 1}// 右if (position_x + background_width >= canvas_width) {direction = direction.replace('r', 'l')count += 1}// 左if (position_x < 0) {direction = direction.replace('l', 'r')count += 1}// 上if (position_y < 0) {direction = direction.replace('t', 'b')count += 1}// 文本ctx.font = text_fontctx.fillStyle = text_color[count % 7]ctx.fillText("DVD", position_x, position_y + background_height - fix_height)// 背景色ctx.fillStyle = background_color[count % 7]// 开始动画window.requestAnimationFrame(dvd)}
}
复制代码

用 canvas 做一个 DVD 待机动画相关推荐

用html做一个拍拍网界面视频,用canvas做一个DVD待机动画的实现代码
免责声明不是打算教 canvas,只是觉得好玩就简单看了一下. 意思就是做得略粗糙,别喷我.. 效果帧数略低,实际当然流畅得多. 实现 HTML * {margin: 0;padding: 0;} ...
android待机动画,Android 忆童年 DVD 待机动画（补档）
image 周末逛「即刻」开到这个消息,然后心生一计,我可以自己做一个 DVD 的 loading效果啊. 什么?你不知道 DVD 是啥?呵呵,暴露年龄了.这是一个具有年代感的东西.你没看到过说明要么 ...
Android 忆童年 DVD 待机动画
周末逛「即刻」开到这个消息,然后心生一计,我可以自己做一个 DVD 的 loading效果啊. 什么?你不知道 DVD 是啥?呵呵,暴露年龄了.这是一个具有年代感的东西.你没看到过说明要么你年轻,年轻 ...
用three.js做一个新闻联播开头动画（一）
一个好习惯,先给结论最终效果如下: 在线体验地址:点我预览代码地址:点我github 本文首发于:https://blog.gis1024.com/three_news_op_1.html 这里才 ...
CSS/SCSS 做一个心跳的动画：keyframe
CSS/SCSS 做一个心跳的动画一.心电图数据化做动画,需要动画曲线,心跳的曲线自然是心电图,网上随便找一个差不多的,选取完整的一部分 1. 横向10等分找到基线,横向10等分. 整个图是一个 ...
php 影院选座js代码,在react中用canvas做一个电影院选座功能
又到了每日分享了.这次分享的是:在react中用canvas做一个电影院选座功能. 前言:项目采用create-react-app脚手架,就是做了一个效果所以只有一个页面但是也用了react-rout ...
使用HTML5的canvas做一个会动的时钟
这次我们的目标是画一个会和时间同步的时钟,不过没有美学感觉,样子丑的厉害. HTML5支持canvas了,我们可以直接在页面上绘图了,我看了下canvas和GDI+的接口差不多,所以我们先了解些基本的 ...
用css3做一个求婚小动画
概述本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细代码下载:http://www ...
用js做一个鼠标惯性动画
用js做一个简单的鼠标惯性动画 <style type="text/css">#div1{width: 50px;height: 50px;background: re ...

用 canvas 做一个 DVD 待机动画

前言

免责声明

效果

实现

HTML

JS

用 canvas 做一个 DVD 待机动画相关推荐

最新文章

热门文章