前言

一天增长一千万粉丝，刘畊宏创造了全平台涨粉新纪录。

全网这么多刘畊宏女孩，程序猿版刘畊宏男孩申请出战！

一、话不多说，先上demo

代码版-刘畊宏本草纲目毽子操

二、html+css+javascript代码版刘畊宏本草纲目毽子操

刘畊宏男孩，程序员申请出战！

本前端程序猿使用了html+css+javascript，实现了刘畊宏全部视频代码版。

二、源码

点击个人主页下载源码。


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>健身操</title></head><body><div id="app"><input type="file" id="button" /><div class="text-box"></div><canvas id="canvas" style="display: none"></canvas><video controls autoplay muted class="video-box"></video></div><script>const fontList = '!@9865432baco71'const unit = 256 / fontList.lengthwindow.onload = function () {const { videoBox, textBox, fileBtn } = useGetNode()const context = canvas.getContext('2d')canvas.width = 480canvas.height = 480fileBtn.onchange = getFilevideoBox.oncanplay = function () {window.interval = setInterval(() => {draw(context, videoBox, textBox)}, 10)}}const useGetNode = () => {return {videoBox: document.querySelector('.video-box'),textBox: document.querySelector('.text-box'),canvas: document.querySelector('#canvas'),fileBtn: document.querySelector('#button')}}function getGray(r, g, b) {return 0.299 * r + 0.578 * g + 0.114 * b}function toText(gray) {return fontList[parseInt(gray / unit)]}const getFile = () => {const { videoBox, fileBtn } = useGetNode()if (!fileBtn) returnlet file = fileBtn.files[0]let src = URL.createObjectURL(file)clearInterval(window.interval)window.interval = nullvideoBox.src = src}const draw = (context, video, target) => {if (!video || !target || !context) returnlet { videoWidth, videoHeight } = videowhile (videoWidth > 480 || videoHeight > 480) {videoWidth /= 1.2videoHeight /= 1.2}video.height = videoHeightvideo.width = videoWidthcontext.drawImage(video, 0, 0, videoWidth, videoHeight)let ImageData = context.getImageData(0, 0, videoWidth, videoHeight)console.log(ImageData, 'ImageData')let [imgDataArr, imgDataWidth, imgDataHeight] = [ImageData.data,ImageData.width,ImageData.height]let html = ''for (let h = 0; h < imgDataHeight; h += 3) {let p = '<p>'for (let w = 0; w < imgDataWidth; w += 3) {let index = (w + imgDataWidth * h) * 4let r = imgDataArr[index]let g = imgDataArr[index + 2]let b = imgDataArr[index + 3]let gray = getGray(r, g, b)p += toText(gray)}p += '</p>'html += p}target.innerHTML = html}</script></body><style>* {margin: 0;padding: 0;}body {font-size: 8px;margin: 10px;/* font-family: Menlo; */font-family: 'Courier New';font-family: monospace;color: rgba(45, 45, 75, 0.96);}p {height: 5px;-webkit-transform-origin-x: 0;}span {width: 5px;}.video-box {visibility: hidden;position: absolute;bottom: 0;}</style>
</html>

三、实现流程

Step1 新建一个txt 文件

Step2 打开文件,复制源码进去

Step3 将 txt 后缀改成 html

Step4 打开文件

Step5 选择视频

Step6 代码版刘畊宏毽子操上线啦～

总结

该代码可上传全网刘畊宏健身操视频，实现任何版本的刘畊宏健身操。

快去亲手实践一下吧～

代码版刘畊宏本草纲目健身操【内附源码/demo】相关推荐

从零实现在线云相亲APP｜程序员脱单神器（内附源码Demo)
实时音视频通话涉及到的技术栈.人力成本.硬件成本非常大,一般个人开发者基本无法独立完成一个功能健全并且稳定的实时音视频应用.本文介绍一天之内,无任何实时音视频低层技术的android开发者完成实时相亲 ...
如何实现在线KTV「实时合唱」技术？【内附源码/Demo】
2021,你还欠谁一场演唱会门票? 2022,你听过云上演唱会吗? 线上开唱,云听歌. 3个月前,西城男孩(Westlife)"所爱越山海"全球首场线上直播演唱会,粉丝在线洒泪:爷 ...
wallpaper代码_五行Python代码自动换你的电脑桌面壁纸（内附源码和exe）
很多行友问行哥,Python能不能自动更换电脑壁纸呀,今天它来了只需要一行代码,指定图片地址即可更换电脑桌面.加上壁纸文件夹路径,让你随机更换电脑桌面,带来不期而遇的新鲜.使用爬虫技术,自动下载壁纸 ...
CTP接口开发案例（内附源码）
CTP接口开发(内附源码) 提示:在看本博客之前建议先阅读上期所官方的开发文档(SimNow官网中去下载CTP接口文件),然后在SimNow官网注册模拟账号. 提示:股票CTP接口和期货CTP接口类似 ...
web python 自动化是什么_Selenium 凭什么成为 Web 自动化测试的首选？（内附源码）...
原标题:Selenium 凭什么成为 Web 自动化测试的首选?(内附源码) 自动化 · 工具 1.QTP QTP是一个商业化的功能测试工具,收费,支持web,桌面自动化测试. 2. Selenium ...
Selenium 凭什么成为 Web 自动化测试的首选？（内附源码）
<自动化>工具 1.QTP QTP是一个商业化的功能测试工具,收费,支持web,桌面自动化测试. 2. Selenium(文章重点讲) Selenium是一个开源的web自动化测试工具,免 ...
高分毕设基于JAVA的仓库管理系统项目(内附源码)
一.高分毕设基于JAVA的仓库管理系统项目(内附源码) 项目简介:(源码免费下载链接如下) 基于JAVA的仓库管理系统项目源码.zip-Java文档类资源-CSDN下载在经过多家公司上线运行后,为了 ...
Babylonjs 最全demo集合（内附源码)
Babylonjs 最全demo集合 (内附源码) 为了方便学习Babylonjs引擎,整理了130多个示例,并且所有的例子全部本地化了,可以离线部署.以后会分别讲解. 一.源码模块介绍 Animat ...
基于电商直播SDK快速实现一个淘宝直播APP【内附源码】
现在各大互联网APP都标配电商直播带货了,没有直播带货开发经验都感觉自己跟不上技术的进步.今天快速基于Java实现一个安卓端电商直播APP,深入理解整个电商直播开发流程.我们最终实现效果如下: 按照惯 ...

代码版刘畊宏本草纲目健身操【内附源码/demo】

前言

一、话不多说，先上demo

二、html+css+javascript代码版刘畊宏本草纲目毽子操

二、源码

三、实现流程

Step1 新建一个txt 文件

Step2 打开文件,复制源码进去

Step3 将 txt 后缀改成 html

Step4 打开文件

Step5 选择视频

Step6 代码版刘畊宏毽子操上线啦～

总结

代码版刘畊宏本草纲目健身操【内附源码/demo】相关推荐

最新文章

热门文章